English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Les sélecteurs CSS sont utilisés pour sélectionner le modèle de style des éléments que vous souhaitez
La colonne "CSS" représente la définition des attributs dans les versions de CSS (CSS1et le CSS2ou pour le CSS3)
| Sélecteur | Exemple | Description | Version de CSS |
|---|---|---|---|
| .class | .intro | Sélectionner tous les éléments whose class is "intro" | 1 |
| #id | #firstname | Sélectionner tous les éléments whose id is "firstname" | 1 |
| * | * | Sélectionner tous les éléments | 2 |
| element | p | Sélectionner tous les éléments <p> | 1 |
| element,element | div,p | Sélectionner tous les éléments <div> et <p> | 1 |
| element element | div p | Sélectionner tous les éléments <p> à l'intérieur d'un élément <div> | 1 |
| element>element | div>p | Sélectionner chaque élément <p> whose parent is an element <div> | 2 |
| element+element | div+p | Sélectionner chaque élément <p> immédiatement après un élément <div> | 2 |
| [attribute] | [target] | Sélectionner tous les éléments having a target attribute | 2 |
| [attribute=value] | [target=-blank] | Sélectionner tous les éléments using target="-Les éléments de type "blank" | 2 |
| [attribute~=value] | [title~=flower] | Sélectionner tous les éléments whose title attribute contains the word "flower" | 2 |
| [attribute|=language] | [lang|=en] | Sélectionner tous les éléments whose lang attribute starts with "en" | 2 |
| [attribute^=value] | a[src^="https"] | Sélectionner chaque élément whose src attribute starts with "https" | 3 |
| [attribute$=value] | a[src$=".pdf"] | Sélectionner chaque élément whose src attribute ends with ".pdf" | 3 |
| [attribute*=value] | a[src*="w3codebox"] | Sélectionner chaque élément whose src attribute contains the substring "w"3Les éléments de type "codebox" | 3 |
| :link | a:link | Sélectionner chaque lien non visité | 1 |
| :visited | a:visited | Sélectionner chaque lien visité | 1 |
| :active | a:active | Sélectionner chaque lien actif | 1 |
| :hover | a:hover | Sélectionner chaque lien auquel la souris est au-dessus | 1 |
| :focus | input:focus | Sélectionner chaque élément d'entrée avec le focus | 2 |
| :first-letter | p:first-letter | Sélectionner la première lettre de chaque élément <p> | 1 |
| :first-line | p:first-line | Sélectionner la première ligne de chaque élément <p> | 1 |
| :first-child | p:first-child | Définir le style pour chaque élément <p> qui est le premier enfant de son parent. | 2 |
| :before | p:before | Insérer du contenu avant chaque élément <p> | 2 |
| :after | p:after | Insérer du contenu après chaque élément <p> | 2 |
| :lang(language) | p:lang(it) | Choisi chaque élément <p> qui a une valeur de début de l'attribut lang="it" | 2 |
| element1~element2 | p~ul | Choisi chaque élément ul suivant l'élément p | 3 |
| :first-of-type | p:first-of-type | Choisi chaque élément p qui est le premier élément p de son parent | 3 |
| :last-of-type | p:last-of-type | Choisi chaque élément p qui est le dernier élément p de son parent | 3 |
| :only-of-type | p:only-of-type | Choisi chaque élément p qui est l'unique élément p de son parent | 3 |
| :only-child | p:only-child | Choisi chaque élément p qui est l'enfant unique de son parent | 3 |
| :nth-child(n) | p:nth-child(2) | Choisi chaque élément p qui est le deuxième enfant de son parent | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Choisi chaque élément p qui est le deuxième enfant de son parent, à partir du dernier enfant | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Choisi chaque élément p qui est le deuxième enfant de son parent | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Choisi chaque élément p qui est le deuxième élément p de son parent, à partir du dernier enfant | 3 |
| :last-child | p:last-child | Choisi chaque élément p qui est le dernier enfant de son parent | 3 |
| :root | :root | Choisi l'élément racine du document | 3 |
| :empty | p:empty | Choisi chaque élément p sans sous-élément (y compris les nœuds de texte) | 3 |
| :target | #news:target | Choisi chaque élément #news actif (y compris l'URL cliquée de l'anneau de ce nom) | 3 |
| :enabled | input:enabled | Choisi chaque élément input activé | 3 |
| :disabled | input:disabled | Choisi chaque élément input désactivé | 3 |
| :checked | input:checked | Choisi chaque élément input sélectionné | 3 |
| :not(selector) | :not(p) | Choisi chaque élément qui n'est pas un élément p | 3 |
| ::selection | ::selection | Correspond à la partie sélectionnée ou mise en surbrillance de l'élément | 3 |
| :out-of-range | :out-of-range | Correspond aux éléments input whose valeurs ne sont pas dans l'intervalle spécifié | 3 |
| :in-range | :in-range | Correspond aux éléments input whose valeurs sont dans l'intervalle spécifié | 3 |
| :read-write | :read-write | Utilisé pour correspondre aux éléments qui sont à la fois lisibles et modifiables | 3 |
| :read-only | :read-only | Utilisé pour correspondre aux éléments qui ont l'attribut "readonly" (lecture seule) | 3 |
| :optional | :optional | Utilisé pour correspondre aux éléments d'entrée optionnels | 3 |
| :required | :required | Utilisé pour correspondre aux éléments qui ont l'attribut "required" | 3 |
| :valid | :valid | Utilisé pour correspondre aux éléments whose valeurs d'entrée sont légitimes | 3 |
| :invalid | :invalid | Utilisé pour correspondre aux éléments whose valeurs d'entrée sont illégales | 3 |