Creare un figlio di una classe generica

[8749michelep]

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]

Ciao, non ho capito bene la domanda
se assegni ad un elemento un attributo tutti gli elementi figli prenderanno lo stesso attributo

<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]

Ciao, non ho capito bene la domanda
se assegni ad un elemento un attributo tutti gli elementi figli prenderanno lo stesso attributo

<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]

certo! al posto di figlio scrivi l'elemento a cui ti vuoi riferire

div.padre p {
text-align: center;
}

potresti anche andare oltre

div.padre p span a{
text-decoration: underline;
}

 

[8749michelep]

certo! al posto di figlio scrivi l'elemento a cui ti vuoi riferire

div.padre p {
text-align: center;
}

potresti anche andare oltre

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]

esempio:

<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]

esempio:

<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]

è 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>

<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>