Tous les sélecteurs CSS courants, regroupés par famille : bases, combinateurs, pseudo-classes, pseudo-éléments et sélecteurs d'attribut. Chaque ligne associe le sélecteur à un exemple en une ligne.
Un sélecteur choisit les éléments auxquels une règle s'applique. La spécificité décide quelle règle gagne quand plusieurs correspondent : inline bat id, id bat classe, classe bat type. Lisez les sélecteurs de droite à gauche : le navigateur fait d'abord correspondre la partie la plus à droite, puis remonte les combinateurs. Les familles ci-dessous couvrent presque tout ce que vous écrirez.
Tableau de référence · 53 entrées
Sélecteurs CSSExplained
53 of 53 rows
Bases
Chaque élément de cette balise.
button { }
Les éléments qui portent cette classe.
.active { }
L'unique élément qui porte cet id.
#header { }
Tous les éléments.
* { box-sizing: border-box; }
La racine du document ; l'endroit habituel pour les propriétés personnalisées globales.
:root { --gap: 1rem; }
Les éléments correspondant à A ou B (regroupement).
h1, h2, h3 { }
Combinateurs
Tout B descendant de A.
nav a { }
B qui est un enfant direct de A.
ul > li { }
B immédiatement après A, même parent.
h1 + p { }
Tout B qui suit A, même parent.
h1 ~ p { }
Pseudo-classes (état)
L'élément tant que le pointeur est dessus.
a:hover { }
L'élément qui a le focus clavier.
input:focus { }
Un élément qui est le premier enfant de son parent.
li:first-child { }
Le n-ième enfant ; accepte des formules comme 2n.
tr:nth-child(2n) { }
Les éléments qui ne correspondent à aucun sélecteur interne ; accepte une liste depuis Selectors 4.
li:not(:first-child, .skip) { }
Une case à cocher, un bouton radio ou une option cochée.
input:checked { }
Un champ ou un bouton désactivé.
button:disabled { }
Un parent qui contient une correspondance au sélecteur interne.
li:has(ul) { }
N'importe quel sélecteur de la liste ; la spécificité est la plus élevée de la liste.
:is(ol, ul) li { }
Identique à :is(), mais avec une spécificité de zéro.
:where(ol, ul) li { }
Le focus qui doit afficher un anneau, généralement depuis le clavier.
a:focus-visible { }
Un élément qui lui-même, ou un de ses descendants, a le focus.
form:focus-within { }
Un élément qui est le dernier enfant de son parent.
li:last-child { }
Un élément sans fratrie.
p:only-child { }
Le n-ième frère de même balise ; accepte des formules comme 2n.
p:nth-of-type(2n) { }
Le premier ou le dernier frère de même balise.
p:first-of-type { }
Un élément sans enfants et sans texte.
td:empty { }
Les liens non visités et les liens déjà visités.
a:visited { }
Les champs marqués requis et les champs laissés facultatifs.
input:required { }
Les champs dont la valeur satisfait ou échoue à ses règles de validation.
input:invalid { }
Un champ que l'utilisateur ne peut pas modifier.
input:read-only { }
L'élément dont l'id correspond au fragment de l'URL.
#note:target { }
L'option présélectionnée ou le bouton par défaut d'un groupe.
input:default { }
Une case à cocher placée dans un état indéterminé par un script.
input:indeterminate { }
Tout élément natif, ou un élément personnalisé une fois enregistré.
my-widget:defined { }
Un élément dans la langue indiquée.
p:lang(fr) { }
Pseudo-éléments
Un nœud de contenu généré avant l'élément.
label::before { content: ""; }
Un nœud de contenu généré après l'élément.
code::after { content: ";"; }
La première lettre d'un bloc de texte.
p::first-letter { }
Le texte indicatif d'un champ.
input::placeholder { }
La première ligne d'un bloc de texte.
p::first-line { }
Le texte que l'utilisateur a sélectionné.
::selection { }
La puce ou le numéro d'un élément de liste.
li::marker { }
La zone derrière un élément plein écran ou une boîte de dialogue.
dialog::backdrop { }
Le bouton de parcours à l'intérieur d'un champ de fichier.
input::file-selector-button { }
Une partie du shadow DOM que l'hôte a exposée.
my-widget::part(header) { }
Sélecteurs d'attribut
Les éléments qui portent l'attribut, quelle que soit la valeur.
[required] { }
L'attribut est exactement égal à val.
[type="submit"] { }
L'attribut commence par val.
a[href^="https"] { }
L'attribut se termine par val.
a[href$=".pdf"] { }
L'attribut contient val.
a[href*="login"] { }
Une liste séparée par des espaces qui inclut val.
[class~="badge"] { }
La valeur est égale à val ou commence par val suivi d'un trait d'union.