Manuel de sélecteurs CSS

Sélecteurs CSS

Les sélecteurs CSS sont utilisés pour "trouver" (ou sélectionner) les éléments HTML que vous souhaitez styliser.

Utilisez notre testeur de sélecteurs CSS pour démontrer différents sélecteurs.

Sélecteurs simples CSS

Les sélecteurs simples sélectionnent les éléments en fonction du nom de l'élément, de l'id et de la classe. De plus, il y a également les sélecteurs universels (*)

Sélecteur Exemple Description de l'exemple
élément p Sélectionner tous les éléments <p>.
#id #firstname Sélectionner l'élément avec id="firstname".
* * Sélectionner tous les éléments.
.class .intro Sélectionner tous les éléments avec class="intro".

Sélecteurs d'attribut CSS

Les sélecteurs d'attribut sélectionnent les éléments HTML ayant un ensemble d'attributs donné.

Sélecteur Exemple Description de l'exemple
[attribute] [target] Sélectionner tous les éléments avec l'attribut target.
[attribute=value] [target=_blank] Sélectionner tous les éléments avec l'attribut target="_blank".
[attribute~=value] [title~=flower] Sélectionner tous les éléments dont l'attribut title contient le mot "flower".
[attribute|=value] [lang|=en] Sélectionner tous les éléments dont la valeur de l'attribut lang commence par "en".
[attribute^=value] a[href^="https"] Sélectionner chaque élément <a> dont la valeur de l'attribut href commence par "https".
[attribute$=value] a[href$=".pdf"] Sélectionner chaque élément <a> dont l'attribut src se termine par ".pdf".
[attribute*=value] a[href*="codew3c"] Sélectionner chaque élément <a> dont la valeur de l'attribut href contient la sous-chaîne "abc".

Sélecteur séquentiel CSS

Sélecteur Exemple Description de l'exemple
& & Appliquer un style à un élément dans le contexte d'un autre élément