Les sélécteurs en CSS
En CSS, sélecteurs sont des modèles utilisés pour sélectionner les éléments que vous voulez style. La colonne « CSS » indique dans quelle version CSS, la propriété est définie (CSS1, CSS2 et CSS3).
Dans le tableau suivant un résumé de sélecteur de CSS2 :
X et Y sont des éléments html donc des balise par exemple: div p img a etc ...
| Motif | Signification |
|---|---|
| * | Correspond à tout élément. |
| X | Correspond à tout élément X ( c.à.d., un élément de type X comme p ,h1, a ...). |
| X Y | Correspond à tout élément Y qui est un descendant de l'élément X. |
| X > Y | Correspond à tout élément Y aussi un enfant de l'élément X. |
| X:first-child | Correspond à un élément X aussi le premier enfant de son élément parent. |
| X:link X:visited |
Correspond à un élément X qui est une ancre dans la source dont le lien n'a pas été visité (:link) ou bien l'a déjà été (:visited). |
| X:active X:hover X:focus |
Correspond à l'élément X au cours de certaines actions de l'utilisateur. |
| X:lang(c) | Correspond à l'élément de type X qui emploie une langue c (la détermination de cette langue est spécifique au langage du document). |
| X + Y | Correspond à tout élément Y immédiatement précédé par un élément X. |
| X[foo] | Correspond à tout élément X avec l'attribut "foo" (quelles qu'en soient les valeurs). |
| X[foo="warning"] | Correspond à tout élément X dont l'attribut "foo" a exactement la valeur "warning". |
| X[foo~="warning"] | Correspond à tout élément X dont l'attribut "foo" a pour valeur une liste de valeurs séparées par des caractères blancs et dont une de celles-ci est "warning". |
| X[lang|="en"] | Correspond à tout élément X dont l'attribut "lang" a pour valeur une liste de valeurs séparées par des tirets, cette liste commençant (à gauche) par "en". |
| DIV.maClasse | Seulement en HTML. Identique à DIV[class~="maClasse"]. càd les div qui ont la class="maClasse" |
| X#mom-id | Correspond à tout élément X dont l'ID est "mom-id". |