Ci-dessous, la liste de tous les sélecteurs que vous pouvez trouver en CSS :
| Sélecteur | Exemple | Description |
|---|---|---|
| .class | .intro | Sélectionne tous les éléments avec class="intro" |
| #id | #firstname | Sélectionne l'élément avec id="firstname" |
| * | * | Sélectionne tous les éléments |
| élément | p | Sélectionne tous les éléments <p> |
| élément , élément | div , p | Sélectionne tous les éléments <div> et tous les éléments <p> |
| élément élément | div p | Sélectionne tous les éléments <p> à l'intérieur des éléments <div> |
| élément > élément | div > p | Sélectionne tous les éléments <p> où le parent est un élément <div> |
| élément + élément | div + p | Sélectionne tous les éléments <p> qui sont placés immédiatement après les éléments <div> |
| élément1~élément2 | p ~ ul | Sélectionne chaque élément <ul> précédé d'un élément <p> comme c'est le cas, dans l'exemple ci-dessous, du premier élément <ul> mais pas du second :<div> <p></p> <ul> <li></li> </ul> <ul> <li></li> </ul> </div> |
| [attribut] | [target] | Sélectionne tous les éléments avec un attribut cible |
| [attribut=valeur] | [target=_blank] | Sélectionne tous les éléments avec target="_ blank" |
| [attribut~=valeur] | [title~=fleur] | Sélectionne tous les éléments avec un attribut de title contenant le mot "fleur" |
| [attribut|=valeur] | [lang|=en] | Sélectionne tous les éléments avec une valeur d'attribut lang commençant par "en" |
| [attribut^=valeur] | a[href^="https"] | Sélectionne chaque élément <a> dont la valeur d'attribut href commence par "https" |
| [attribut$=valeur] | a[href$=".pdf"] | Sélectionne chaque élément <a> dont la valeur de l'attribut href se termine par ".pdf" |
| [attribut*=valeur] | a[href*="hei"] | Sélectionne chaque élément <a> dont la valeur d'attribut href contient la sous-chaîne "hei" |
| :active | a:active | Sélectionne le lien actif |
| ::after | p::after | Insérez quelque chose après le contenu de chaque élément <p> |
| ::before | p::before | Insérez quelque chose avant le contenu de chaque élément <p> |
| :checked | input:checked | Sélectionne chaque élément <input> coché |
| :disabled | input:disabled | Sélectionne chaque élément <input> désactivé |
| :empty | p:empty | Sélectionne chaque élément <p> qui n'a pas d'enfant (y compris les nœuds de texte) |
| :enabled | input:enabled | Sélectionne chaque élément <input> activé |
| :first-child | p:first-child | Sélectionne chaque élément <p> qui est le premier enfant de son parent |
| ::first-letter | p::first-letter | Sélectionne la première lettre de chaque élément <p> |
| ::first-line | p::first-line | Sélectionne la première ligne de chaque élément <p> |
| :first-of-type | p:first-of-type | Sélectionne chaque <p> élément qui est le premier <p> élément de son parent |
| :focus | input:focus | Sélectionne l'élément d'entrée qui a le focus |
| :hover | p:hover | Sélectionne les paragraphes survolés par la souris |
| :in-range | input:in-range | Sélectionne les éléments d'entrée avec une valeur comprise dans une plage spécifiée |
| :invalid | input:invalid | Sélectionne tous les éléments d'entrée avec une valeur non valide |
| :lang(language) | p:lang(it) | Sélectionne chaque élément <p> avec un attribut lang égal à "it" (italien) |
| :last-child | p:last-child | Sélectionne chaque <p> élément qui est le dernier enfant de son parent |
| :last-of-type | p:last-of-type | Sélectionne chaque <p> élément qui est le dernier <p> élément de son parent |
| :link | a:link | Sélectionne tous les liens non visités |
| :not(selector) | :not(p) | Sélectionne chaque élément qui n'est pas un élément <p> |
| :nth-child(expression) | p:nth-child(2) | Sélectionne chaque <p> élément qui est le second enfant de son parent |
| p:nth-child(3n) | Sélectionne chaque <p> élément qui est à une position multiple de 3 dans l'ordre de filiation. | |
| :nth-last-child(expression) | p:nth-last-child(2) | Sélectionne chaque <p> élément qui est le deuxième enfant de son parent, en comptant à partir du dernier enfant |
| :nth-last-of-type(expression) | p:nth-last-of-type(2) | Sélectionne chaque <p> élément qui est le second <p> élément de son parent, en comptant à partir du dernier enfant |
| :nth-of-type(expression) | p:nth-of-type(2) | Sélectionne chaque <p> élément qui est le second <p> élément de son parent |
| :only-of-type | p:only-of-type | Sélectionne chaque <p> élément qui est le seul <p> élément de son parent |
| :only-child | p:only-child | Sélectionne chaque élément <p> qui est le seul enfant de son parent |
| :optional | input:optional | Sélectionne les éléments d'entrée sans attribut "optional" |
| :out-of-range | input:out-of-range | Sélectionne les éléments d'entrée avec une valeur en dehors d'une plage spécifiée |
| :read-only | input:read-only | Sélectionne les éléments d'entrée avec l'attribut "readonly" spécifié |
| :read-write | input:read-write | Sélectionne les éléments d'entrée avec l'attribut "readonly" non spécifié |
| :required | input:required | Sélectionne les éléments d'entrée avec l'attribut "required" spécifié |
| :root | :root | Sélectionne l'élément racine du document |
| ::selection | ::selection | Sélectionne la partie d'un élément qui est sélectionnée par un utilisateur |
| :target | #news:target | Sélectionne l'élément actif #news actif (cliqué sur une URL contenant ce nom d'ancre) |
| :valid | input:valid | Sélectionne tous les éléments d'entrée avec une valeur valide |
| :visited | a:visited | Sélectionne tous les liens visités |