Résumé des sélecteurs CSS

Sélecteurs simples

* tous les éléments du document HTML (sélecteur universel)
nom_elt tous les éléments nom_elt du document HTML (sélecteur de type)
.abcd tous les éléments dont l'attribut class a la valeur abcd (sélecteur de classe)
#xyz l'élement dont l'attribut id a la valeur xyz (sélecteur d'identifiant)

Sélecteurs d'attribut

[att] élements avec un attribut att, quelque soit la valeur de cet attribut.
[att="val"] éléments avec un attribut att dont la valeur est égale à val.
[att^="val"] éléments avec un attribut att dont la valeur commence par val.
[att$="val"] éléments avec un attribut att dont la valeur finit par val.
[att*="val"] éléments avec un attribut att dont la valeur contient val.
[att~="val"] éléments avec un attribut att dont la valeur est une liste de valeurs séparées par un espace, et dont l'une de ces valeur est égale à val.
[att|="val"] éléments avec un attribut att dont la valeur est une liste de valeurs séparées par une virgule, et dont l'une de ces valeurs est égale à val.

Pseudo classe

:link élements a (liens) qui n'ont pas encore été visités.
:visited élements a (liens) qui ont déjà été visités.
:active éléments quand la souris est enfoncée.
:hover éléments survolés par la souris.
:focus éléments qui ont deviennent la cible des interactions clavier ou souris(focus).
:root racine du document, soit l'élément html
:first-child 1er enfant
:nth-child(n) n-ième enfant
:last-child dernier enfant
:nth-last-child(n) n-ième enfant en partant de la fin
:only-child éléments qui sont les seuls enfants de leur parent.
:first-of-type 1er enfant d'un certain type
:nth-of-type(n) n-ième enfant d'un certain type
:last-of-type dernier enfant d'un certain type
:nth-last-of-type(n) n-ième enfant d'un certain type, en partant de la fin
:only-of-type éléments qui sont les seuls enfants d'un certain type
:empty éléments qui n'ont pas d'enfant, y compris de noeud texte.
:target éléments qui sont les cibles d'une ancre nommée dans des liens.
:enabled zones de formulaire actives (ie avec saisie ou click possible).
:disabled zones de formulaire désactivés (ie sans saisie ou click possible).
:checked case à cocher ou bouton radio cochés.
:not(S) éléments qui ne seraient pas sélectionnés par le sélecteur simple S

Pseudo éléments

::first-line 1ère ligne du texte d'un élément
::first-letter 1ère lettre du texte d'un élément
::before insére un contenu avant un élément
::after insére un contenu après un élément

Sélecteurs composés

  S1 et S2 représentent chacun un sélecteur simple, d'attribut, de pseudo classe ou de pseudo élément
S1, S2 sélecteurs groupés : S1 et S2.
S1 S2 sélecteur de descendants : les éléments S2 qui sont descendants de S1.
S1 > S2 sélecteur d'enfants : les éléments S2 qui sont des enfants de S1.
S1 + S2 sélecteur d'adjacents direct : S1 et S2 ont le même parent, et les éléments S2 sont immédiatement précédés d'un élément S1.
S1 ~ S2 sélecteur d'adjacents indirect : S1 et S2 ont le même parent, et les éléments S2 sont précédés quelque part d'un élément S1.