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>