Les sélecteurs en CSS

Cours les sélecteurs en CSS, tutoriel & guide de travaux pratiques en pdf.

Les pseudo-classes

Plusieurs pseudo-classes ont été ajouté :
:rootCe sélecteur représente un élément qui est la racine d’un document. Par exemple, en HTML 4, l’élément est html.
:nth-child(expression) Ce sélecteur permet de cibler tous les éléments en se basant sur leur position dans la liste des enfants de leur parent.
expression peut être un nombre, une expression numérique ou un mot clé tel que « odd » ou « even ».
Les sélecteurs en CSS3 par debray jerome (Dji programmation web2 et design) (Blog)
Exemple :
.exampleTable{ width:100%; border:1px solid #444; } .exampleTable tr:nth-child(even){
//tous les enfants aux numéros pairs background:#999999; text-shadow: 2px 2px 5px #111; color:#fff; } .exampleTable tr:nth-child(odd){
//tous les enfants aux numéros impairs background:#990000; color:#fff; } .exampleTable tr:nth-child(3n){
//tous les 3 enfants background:#045FB4; color:#fff;
}
.exampleTable tr:nth-child(7){
//l’enfant numéro 7 background:#006400; text-shadow: 2px 2px 2px #fff; color:#000;
}