Le CSS3 fournit un grand nombre de sélecteurs qui peuvent servir à des fins variées. Voici une liste de sélecteurs choisis parmis les plus utiles :
| Selecteur | Description |
|---|---|
| élément | Sélectionne tous les éléments de type élément. |
| .classe | Sélectionne tous les éléments de classe classe. |
| #identifiant | Sélectionne tous les éléments d’identifiant identifiant. |
| sélecteur.classe | Sélectionne tous les éléments sélectionnés par sélecteur et de classe classe. |
| sélecteur#identifiant | Sélectionne tous les éléments sélectionnés par sélecteur et d’identifiant identifiant. |
| * | Sélectionne tous les éléments (sélecteur universel). Par exemple, les sélecteurs *.classe et .classe sélectionnent les mêmes éléments. |
| sélecteur1, sélecteur2, sélecteur3 | Sélectionne tous les éléments sélectionnés par sélecteur1,
tous ceux sélectionnés par sélecteur2 et tous ceux sélectionnés par sélecteur3. |
| sélecteur1 sélecteur2 | Sélectionne tous les éléments sélectionnés par sélecteur2 contenus dans un élément sélectionné par
sélecteur1. |
| sélecteur1>sélecteur2 | Sélectionne tous les éléments sélectionnés par sélecteur2 qui sont enfants d’un élément sélectionné par
sélecteur1. |
| sélecteur1+sélecteur2 | Sélectionne tous les éléments sélectionnés par sélecteur2 qui suivent immédiatement un élément frère sélectionné par
sélecteur1. |
| sélecteurs1~sélecteurs2 | Sélectionne tous les éléments sélectionnés par sélecteur2 qui suivent un élément frère sélectionné par sélecteur1. |
sélecteur:first-child | Sélectionne tous les éléments sélectionnés par sélecteur qui sont le premier enfant de leur parent. |
sélecteur:last-child | Sélectionne tous les éléments sélectionnés par sélecteur qui sont le dernier enfant de leur parent. |
sélecteur:first-of-type | Sélectionne tous les éléments sélectionnés par sélecteur qui sont le premier élément de ce type contenu dans leur parent. |
sélecteur:last-of-type | Sélectionne tous les éléments sélectionnés par sélecteur qui sont le dernier élément de ce type contenu dans leur parent. |
a:link | Sélectionne tous les liens non visités. |
a:visited | Sélectionne tous les liens visités. |
a:hover | Sélectionne le lien sur lequel se promène la souris. |
Les sélecteurs suivants ont la particularité de pouvoir faire intervenir une expression mathématique :
| Selecteur | Description |
|---|---|
élément:nth-child(nb) | Sélectionne chaque élément de type élément qui est le nb-ième enfant de son parent. |
élément:nth-last-child(nb) | Sélectionne chaque élément de type élément qui est le nb-ième enfant de son parent en comptant les enfants en sens inverse à partir du dernier. |
élément:nth-of-type(nb) | Sélectionne chaque élément de type élément qui est le nb-ième élément de type élément de son parent. |
élément:nth-last-of-type(nb) | Sélectionne chaque élément de type élément qui est le nb-ième élément de type élément de son parent en comptant les éléments en sens inverse à partir du dernier. |
Pour les sélecteurs dans ce tableau, nb peut désigner :
even (pair) ou odd (impair) ;Dans tous les cas, la numérotation des enfants/éléments commence à 1.
Ainsi, le code CSS
tr:nth-child(odd) { background-color: yellow; }
tr:nth-child(even) { background-color: lightblue; }
td:nth-of-type(4n+1) { background-color: aqua; }
donnera un tableau dont les lignes auront des couleurs d'arrière-plan alternées jaune et bleu-pâle et dont les colonnes 1, 5, 9, etc. auront un fond aqua.