Aide-mémoire - Sélecteur CSS

Sélectionne les éléments par leur nom de balise. Par exemple, header {...} sélectionne toutes les balises <header>.

Sélectionne un élément par son identifiant unique id défini dans le HTML. On utilise le symbole # suivi de l'identifiant. Par exemple, #mon‑id {...} sélectionne l'élément avec id="mon‑id".

Sélectionne les éléments par leur classe. On utilise le symbole . suivi du nom de la classe. Par exemple, .ma‑classe {...} sélectionne tous les éléments avec la classe class="ma‑classe".

Sélectionne les éléments qui possèdent un attribut spécifique. Par exemple, input[type="text"] {...} sélectionne tous les éléments <input> avec l'attribut type="text".

Sélectionne les éléments en combinant plusieurs sélecteurs. Par exemple, header#mon‑id {...} sélectionne un élément <header> avec le id="mon‑id". On doit mettre les sélecteurs les uns à la suite des autres sans espace.

Sélectionne les éléments en fonction de leur position dans la hiérarchie du document. Par exemple, header nav .active sélectionne les éléments avec la classe class="active" qui sont des descendants d'un élément <nav> qui lui-même est un descendant d'un élément <header>.

Sélectionne plusieurs éléments en utilisant une virgule pour séparer les sélecteurs. Par exemple, header, footer {...} sélectionne tous les éléments <header> et <footer>.

Sélectionne les éléments qui sont des enfants directs d'un élément parent. Par exemple, .liste > li {...} sélectionne uniquement les éléments <li> qui sont des enfants directs de l'élément .liste.

Sélecteur conditionnel qui s'applique lorsque l'utilisateur survole un élément avec la souris. Par exemple, button:hover {...} applique le style aux boutons lorsque la souris est au-dessus.

Sélecteur conditionnel qui s'applique lorsque l'utilisateur clique sur un élément. Par exemple, button:active {...} applique le style aux boutons pendant qu'ils sont cliqués.

Sélecteur conditionnel qui s'applique aux éléments de formulaire qui sont cochés, comme les cases à cocher ou les boutons radio. Par exemple, input[type="checkbox"] :checked {...} sélectionne les cases à cocher qui sont cochées.

Sélecteur conditionnel qui s'applique aux éléments de formulaire qui sont désactivés. Par exemple, input:disabled {...} sélectionne les champs de saisie qui sont désactivés.

Sélectionne uniquement l'élément s'il est le premier enfant d'un conteneur. Par exemple, ul li:first-child {...} sélectionne le premier élément de liste dans une liste non ordonnée.

Sélectionne uniquement l'élément s'il est le dernier enfant d'un conteneur. Par exemple, ul li:last-child {...} sélectionne le dernier élément de liste dans une liste non ordonnée.

Sélectionne l'inverse du sélecteur spécifié entre paranthèse. Par exemple, div:not(.exemple) {...} sélectionne tous les éléments <div> qui n'ont pas la classe class="exemple".