p[name="principal"]
Afecta solo aquel párrafo cuyo name sea "principal"
p[name^="pri"]
Afecta a todos aquellos párrafos cuyo name empiece por "pri"
p[name$="pri"]
Afecta a todos aquellos párrafos cuyo name terminen en "pri"
p[name*="pri"]
Afecta a todos aquellos párrafos cuyo name contenga "pri"
-----------------------------------------------------------------------------
PSEUDOCLASES
p:nth-child(3) {
background-color:#ff0000;
}
Afecta solo al tercer <p> que haya en el documento
p:nth-child(odd) { // Afecta a todos los <p> impares
background-color:#FF0000;
}
p:nth-child(even) { // Afecta a todos los <p> pares
background-color:#2C2961;
}
p:first-child { // Afecta solo al primer <p>
background-color:#000;
}
p:last-child { // Afecta solo al último <p>
background-color:#FFF;
}
p:only-child { // Afecta solo a aquellos <p> que estén solos (no tengan hermanos)
background-color:blue;
}
----------------------------------------------------------------------------
Uso de >, +, ~
div> p.estilo1 { ... } // Solo afectará a aquellos <p> que tengan un <div> como padre
p.estilo1 + p { ... } // Solo el <p> que sea hijo de p.estilo1 será afectado
p.estilo1 ~ p { ... } // Afectará a todos aquellos <p> que sean hermanos de ese p.estilo1

nice article for beginners.thank you.
ResponderEliminarcss ref