Auteur: Jérôme Forget. Publié le 8 juillet 2006.
Voici un tableau récapitulatif des différents sélecteurs CSS, avec leur syntaxe et leur signification. Apprenez à les reconnaître, à les identifier et à les utiliser lorsque nécessaire.
| Sélecteur | Syntaxe | Signification |
|---|---|---|
| Sélecteur universel | * | Correspond à tout élément. |
| Sélecteurs de type | E | Correspond à tout élément E (c.à.d., un élément de type E). |
| Sélecteurs descendants | E F | Correspond à tout élément F qui est un descendant de l'élément E. |
| Sélecteurs d'enfant | E > F | Correspond à tout élément F aussi un enfant de l'élément E. |
| La pseudo-classe :first-child | E:first-child | Correspond à un élément E aussi le premier enfant de son élément parent. |
| Les pseudo-classes de lien | E:link E:visited | Correspond à un élément E qui est une ancre dans la source dont le lien n'a pas été visité (:link) ou bien l'a déjà été (:visited). |
| Les pseudo-classes dynamiques | E:active E:hover E:focus | Correspond à l'élément E au cours de certaines actions de l'utilisateur. |
| La pseudo-classe :lang() | E:lang(c) | Correspond à l'élément de type E qui emploie une langue c (la détermination de cette langue est spécifique au langage du document). |
| Les sélecteurs adjacents | E + F | Correspond à tout élément F immédiatement précédé par un élément E. |
| Sélecteurs d'attribut | E[foo] | Correspond à tout élément E avec l'attribut "foo" (quelles qu'en soient les valeurs). |
| Sélecteurs d'attribut | E[foo="warning"] | Correspond à tout élément E dont l'attribut "foo" a exactement la valeur "warning". |
| Sélecteurs d'attribut | E[foo˜="warning"] | Correspond à tout élément E 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". |
| Sélecteurs d'attribut | E[lang|="en"] | Correspond à tout élément E dont l'attribut "lang" a pour valeur une liste de valeurs séparées par des tirets, cette liste commençant (à gauche) par "en". |
| Sélecteurs de classe | DIV.warning | Seulement en HTML. Identique à DIV[class~="warning"]. |
| Sélecteurs d'ID | E#myid | Correspond à tout élément E dont l'ID est "myid". |