Publié le par Sandrine Martinez

Les sélecteurs CSS

Un récapitulatif des sélecteurs CSS.

Les sélecteurs CSS simples

Les sélecteurs de type

Il permet de sélectionner les éléments HTML par leur type.

body {
    ...
}

Les sélecteur de classe

Il permet de sélectionner les éléments avec un attribut class.

.class {
    ...
}

Les sélecteurs d’identifiant

Il permet de sélectionner les éléments avec un attribut id.

#id {
    ...
}

Le sélecteur universel

Il permet de sélectionner tous les éléments.

* {
      ...
}

Les sélecteurs d’attribut

Il permet de sélectionner les éléments en fonction d’un attribut ou de sa valeur.

// Cible les attributs "id"
[id] {
    ...
}

// Cible les attributs "id" dont la valeur
// est "main"
[id=main] {
 ...
}

// Cible les attributs "class" dont l'une
// des valeurs correspond à "main"
[class~=main] {
 ...
}

// Cible les attributs "class" dont la valeur
// correspond à "main" ou commence par "main-"
[class|=main] {
 ...
}

// Cible les attributs "class" dont la valeur
// commence par "main"
[class^=main] {
 ...
}

// Cible les attributs "class" dont la valeur
// finit par "main"
[class$=main] {
 ...
}

// Cible les attributs "id" dont la valeur
// contient au moins une fois la valeur "main"
[id*=main] {
 ...
}

// Cible les attributs "id" dont la valeur 
// est "main" sans prendre en compte la casse
[id=main i] {
    ...
}

Les combinateurs

Les sélecteurs de voisin direct

Le combinateur  +  permet de sélectionner les éléments qui suivent directement un élément donné.

// Cible l'élément "li" qui
// suit le premier "li"
li:first-of-type + li {
  ...
}

Les sélecteurs de voisins

Le combinateur  ~  permet de sélectionner les éléments qui suivent un élément donné et ont le même parent.

// Cible les éléments "span" qui
// suivent l'élément "p"
p ~ span {
  color: red;
}

Les sélecteurs d’éléments fils

Le combinateur  >  permet de sélectionner l’élément enfant d’un élément donné.

// Cible les éléments "p" qui sont
// enfants directs d'un élément "div"
div > p {
    ...
}

Les sélecteurs d’éléments descendants

Le combinateur      permet de sélectionner les éléments enfants directs et indirects d’un élément donné.

// Cible les éléments "p" qui sont
// enfants directs et indirects
// d'un élément "div"
div p {
    ...
}

Les pseudo-classes

Elles permettent de cibler les éléments selon leur état.

Pseudo-classes Description
:active Cible l’élément lorsqu’il est activé
:any() Cible un ensemble d’éléments
:any-link Cible les liens avec « src »
:checked Cible les éléments de sélection actifs
:default Cible un élément qui est un élément par défaut parmi d’autres
:dir() Cible les éléments en fonction de la direction du texte
:disabled Cible les éléments inactifs
:defined Cible les éléments ayant été défini
:empty Cible les éléments sans enfant
:enabled Cible les éléments actifs
:first Cible la première page lors de l’impression d’un document
:first-child Cible le premier élément enfant
:first-of-type Cible le premier élément enfant d’un type donné
:fullscreen Cible les éléments affichés en plein écran
:focus Cible les éléments qui ont le focus
:focus-visible Cible les éléments qui ont le focus et dont le navigateur autorise l’affichage du style des focus
:host Cible l’hôte d’un shadow DOM
:host() Cible l’hôte d’un shadow DOM si le sélecteur passé en argument correspond à  l’élément hôte
:host-context() Cible l’hôte d’un shadow DOM si le sélecteur passé en argument correspond à  l’ancêtre de l’élément hôte
:hover Cible l’élément survolé
:indeterminate Cible les éléments d’un formulaire qui sont indéterminés
:in-range Cible un élément input lorsque sa valeur courante correspond à l’intervalle défini par les attributs min et max
:invalid Cible les éléments input non conformes
:lang() Cible les élément en fonction de la langue
:last-child Cible le dernier élément enfant
:last-of-type Cible le dernier élément enfant d’un type donné
:left Cible les pages de gauche lors de l’impression d’un document
:link Cible les liens
:not() Cible les éléments qui ne sont pas l’élément définit comme argument
:nth-child() Cible l’élément dont le numéro est passé en argument
:nth-last-child() Cible l’élément dont le  numéro est passé en argument à partir du dernier enfant
:nth-last-of-type() Cible l’élément dont le type est donné et le numéro est passé en argument à partir du dernier type
:nth-of-type() Cible l’élément dont le type est donné et le numéro est passé en argument
:only-child Cible des éléments qui sont le seul enfant
:only-of-type Cible des éléments qui n’ont qu’un enfant d’un type donné
:optional Cible les éléments input non requis
:out-of-range Cible un élément input lorsque sa valeur courante ne correspond pas à l’intervalle défini par les attributs min et max
:read-only Cible un élément qui ne peux pas être modifier par l’utilisateur
:read-write Cible un élément qui peut être modifié par l’utilisateur
:required Cible les éléments input requis
:right Cible les pages de droite lors de l’impression d’un document
:root Cible la racine de l’arbre
:scope Cible la racine de l’arbre dans une feuille de style
:target Cible l’unique élément dont l’id correspond au href du lien
:valid Cible les éléments input conformes
:visited Cible les liens visités

Les pseudo-éléments

Elles permettent de cibler des éléments selon une spécificité.

Pseudo-éléments Description
::after Crée un pseudo élément qui sera le dernier enfant de l’élément sélectionné
::before Crée un pseudo élément qui sera le premier enfant de l’élément sélectionné
::cue Cible les indications textuelles webVTT
::first-letter Cible la première lettre d’un élément
::first-line  Cible la première ligne d’un élément
::selection Cible l’élément sélectionné par l’utilisateur
::backdrop Cible une boîte qui est affichée en dessous de l’élément
::placeholder Cible le texte par défaut d’un champ input
::marker Cible le marqueur d’un élément liste [puce ou numéro]
::slotted Cible les éléments slot
::spelling-error Cible les textes mal orthographiés
::grammar-error Cible les textes avec une erreur de grammaire

Sources de l’article

 

 

CatégoriesCSS