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

Somaire

HTML & CSS

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".
Par carabde 10 mars 2014

chapitre suivant