Creare un figlio di una classe generica

8749michelep

Utente Attivo
9 Mar 2013
46
0
0
www.listecanali.com
Ragazzi sto impazzendo ma non so se esiste questa regola. Posso creare un figlio di una classe generica? In modo da far eridatare al figlio gli attributi e i valori del genitore?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, non ho capito bene la domanda
se assegni ad un elemento un attributo tutti gli elementi figli prenderanno lo stesso attributo
Codice:
<style>
    div.padre {
        color: red;
    }
</style>
<div class="padre">
    <p>testo rosso</p>
    <span>altro testo rosso</span>
    <div>ancora testo rosso</div>
</div>
 

8749michelep

Utente Attivo
9 Mar 2013
46
0
0
www.listecanali.com
Ciao, non ho capito bene la domanda
se assegni ad un elemento un attributo tutti gli elementi figli prenderanno lo stesso attributo
Codice:
<style>
    div.padre {
        color: red;
    }
</style>
<div class="padre">
    <p>testo rosso</p>
    <span>altro testo rosso</span>
    <div>ancora testo rosso</div>
</div>

Forse mi esprimo male perchè da poco mi sto affacciando al web. tu mi hai fatto degli esempi padre figlio con HTML. Io parlavo padre figlio con CSS

Faccio un esempio non fate caso se ho errato ma è quello che voglio intendere

<style>
div.padre {
color: red;
}

div.padre figlio {
text-align: center;
}
</style>

Voglio dire che con questo esempio se faccio riferimento al padre scrivo in rosso e se faccio riferimento al figlio scrivo in rosso e centrato. Questo voglio dire, è possibile fare una cosa del genere?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
certo! al posto di figlio scrivi l'elemento a cui ti vuoi riferire
Codice:
div.padre p {
text-align: center;
}
potresti anche andare oltre
Codice:
div.padre p span a{
text-decoration: underline;
}
 

8749michelep

Utente Attivo
9 Mar 2013
46
0
0
www.listecanali.com
certo! al posto di figlio scrivi l'elemento a cui ti vuoi riferire
Codice:
div.padre p {
text-align: center;
}
potresti anche andare oltre
Codice:
div.padre p span a{
text-decoration: underline;
}

Però vorrei capire meglio. Mi stai dicendo che se utilizzo l'elemento p, span o a lo troverò come centrato e sottolineato? Però l'elemto p lo trovo sia sopra che sotto. Mi sto confendendo, grazie ancora per le risposte
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
esempio:
HTML:
<style>
    div.padre {
        color:red;
        width: 240px;
        border:1px solid red;
    }
    div a {
        color: green;
    }
    div.padre p a {
        color:blue;
    }
    div.padre p.center {
        text-align: center;
        font-weight: bold;
    }
</style>
<div class="padre">
    <a href="#">link</a>
    <p>testo non formattato</p>
    <p class="center">testo centrato grassetto</p>
    <p><a href="#">altro testo</a></p>
</div>
Come vedi è possibile assegnare degli attributi ad ogni singolo elemento l'importante è seguire la sua posizione nella struttura html
La regola "div a {" assegna il colore verde a tutti i tag <a> contenuti dentro un div qualsiasi,
quella sucessiva "div.padre p a{" è valida solo per gli <a> contenuti nell'elemento <p> del div con classe "padre"
Si lo so non mi sono capito nemmeno io ma vedrai che con un po di pratica ne verrai a capo
 

8749michelep

Utente Attivo
9 Mar 2013
46
0
0
www.listecanali.com
esempio:
HTML:
<style>
    div.padre {
        color:red;
        width: 240px;
        border:1px solid red;
    }
    div a {
        color: green;
    }
    div.padre p a {
        color:blue;
    }
    div.padre p.center {
        text-align: center;
        font-weight: bold;
    }
</style>
<div class="padre">
    <a href="#">link</a>
    <p>testo non formattato</p>
    <p class="center">testo centrato grassetto</p>
    <p><a href="#">altro testo</a></p>
</div>
Come vedi è possibile assegnare degli attributi ad ogni singolo elemento l'importante è seguire la sua posizione nella struttura html
La regola "div a {" assegna il colore verde a tutti i tag <a> contenuti dentro un div qualsiasi,
quella sucessiva "div.padre p a{" è valida solo per gli <a> contenuti nell'elemento <p> del div con classe "padre"
Si lo so non mi sono capito nemmeno io ma vedrai che con un po di pratica ne verrai a capo

Adesso capisco comunque farò delle prove con il codice che mi hai scritto. Solo che dal libro che sto studiando devo imparare bene a trascrivere le regole CSS. A proposito di questo il codice div.padre p.center che mi assegna il testo centrato e grassetto vale per 2 elementi con le rispettive classi o è specifica del tipo classe center dell'elemento p a sua volta contenuto nel div di classe padre?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
è specifica del tag <p> con class center contenuto nel div con class padre
a differenza dell'id puoi assegnare la stessa classe anche a piu elementi <p>
Codice:
<div class="padre">    
    <p class="center">testo centrato grassetto</p>    
    <p class="center">testo centrato grassetto</p>
    <p class="center">testo centrato grassetto</p>
</div>
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Creare un testo trasparente dietro un div HTML e CSS 5
M Creare traccia di download file sul server HTML e CSS 2
A Cerco programmatore/sviluppatore per creare forum Offerte e Richieste di Lavoro e/o Collaborazione 2
L Creare ancore interne alla pagina PHP 1
I Creare un banner temporaneo JavaScript Javascript 0
C Creare Tabella Dati Meteo prelevandoli da dei Tags in un altro foglio PHP 27
simgia Cordova errore quando cerco di emulare o creare la app Sviluppo app per Android 2
U PHP creare un file excel dopo ricerca nel DB PHP 0
A Creare un cronometro PHP 5
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
F Creare elementi html con javascript Javascript 3
Shyson Modificare codice e creare link PHP 0
Cosina Creare bottone delete in form upload PHP 5
Cosina Creare bottone delete in form upload PHP 1
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
L Creare una forma geometrica Photoshop 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
S Libreria PHP per creare file dwg o dxf PHP 0
R Come creare sistema Add to homescreen PHP 3
L Creare un countdown con giorno specifico della settimana PHP 3
W Creare link di una dato Classic ASP 0
W creare file .jar Java 2
M Creare con il Vb 2010 Il Classico Notes di Windows Vista Visual Basic 1
MarcoGrazia Creare una password Snippet Javascript 0
J creare pagina php di prenotazione PHP 5
A Creare un modulo di ricerca avanzata con dreamweaver HTML e CSS 0
INTEROPERABILITY Sviluppatrice/formatrice creare APP Offerte e Richieste di Lavoro e/o Collaborazione 0
L Creare una pagina pre-home WordPress 1
G Creare side-bar non visibile da dispositivi mobile HTML e CSS 0
L creare oggetti da una classe tramite un form Javascript 0
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
maxnegri Contare sessioni aperte e creare condizione PHP 1
A Come creare pulsante donazione PayPal HTML e CSS 5
L [CERCO] Creare blog su WordPress con tema Divi Offerte e Richieste di Lavoro e/o Collaborazione 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
R [Photoshop] Creare Azione Photoshop 1
F [PHP] creare tabella e tasto cerca PHP 3
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
B [PHP] Creare PDF dopo inserimento dati form PHP 4
A [HTML] Creare sito web per eLearnig HTML e CSS 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
R [PHP] Creare sistema random PHP 3
D [PHP] Consigli su come creare form PHP 1
I Creare Qsl radioamatore con testo editabile Presentati al Forum 1
T [PHP] Creare Honeypot per form contatti PHP 10
S [PHP] Creare collegamento filtri di ricerca al database PHP 6
Z Creare VirtualHost Apache2 con PHP? Programmazione 0
max_400 [HTML] Come creare un jpg animata (non gif animata) HTML e CSS 3
A Come creare un framset Sviluppo app per Android 1

Discussioni simili