Cibler des éléments spécifiques avec les pseudo-classes CSS

Par /

Les pseudo-classes CSS offrent un moyen puissant de sélectionner et de styliser des éléments HTML avec précision. Parmi ces pseudo-classes, certaines permettent de cibler des éléments enfants spécifiques au sein d’un groupe d’éléments de même type, en se basant sur leur position relative ou sur d’autres critères.

Cibler tous les enfants directs avec > *

<div class="parent">
    <p>Paragraphe 1</p>
    <span>Span 1</span>
    <p>Paragraphe 2</p>
    <div>
        <p>Paragraphe imbriqué</p>
    </div>
</div>
.parent > * {
    /* Styles appliqués à tous les enfants directs de .parent */
    border: 1px solid black;
    margin: 5px;
}

Cibler tous les descendants avec *

.parent * {
    /* Styles appliqués à tous les descendants de .parent */
    color: blue;
}

Pseudo-classes pour cibler des enfants spécifiques

Exemple d’utilisation

ul li:first-child {
  /* Style du premier élément de la liste */
  font-weight: bold;
}

ul li:last-child {
  /* Style du dernier élément de la liste */
  margin-bottom: 20px;
}

ul li:nth-child(odd) {
  /* Style des éléments impairs de la liste */
  background-color: #f0f0f0;
}

Sélection d’éléments enfants

Sélecteur d’enfant

div > p {
  /* Style appliqué à tous les paragraphes <p> enfants directs d'un élément <div> */
}

Sélecteur universel avec sélecteur de type

* > p {
  /* Style appliqué à tous les paragraphes <p> de la page, y compris les enfants directs */
}

Sélection de tous les descendants d’un élément parent

div p {
  /* Style appliqué à tous les paragraphes <p> descendants d'un élément <div>, y compris les enfants directs et indirects */
}

Cibler le premier enfant ou dernier enfant avec :first-child et :last-child

Les pseudo-classes :first-child et :last-child ciblent un élément qui est le premier enfant ou le dernier enfant de son parent.

Sélectionner le premier élément enfant d’un élément parent

Pseudo-classe :first-child

.conteneur ul:first-child {
  /* Style appliqué au premier élément enfant
}
div > p:first-child {
  /* Style appliqué au premier paragraphe <p> enfant direct d'un élément <div> */
}
.conteneur ul :last-child {
  /* Style appliqué au dernier élément enfant
}

Sélectionner le dernier élément enfant d’un élément parent

Pseudo-classe :last-child

div > p:last-child {
  /* Style appliqué au dernier paragraphe <p> enfant direct d'un élément <div> */
}

Cibler précis des éléments enfants en fonction de leur position parmi leurs frères et sœurs avec :nth-child()

Pseudo-classe :nth-child(n)

:nth-child(2) : Sélectionne le deuxième élément enfant.

ul li:nth-child(3) {
  /* Style appliqué au troisième élément de la lsiste */
}

La valeur n peut être un nombre, un mot-clé ou une expression complexe.

Sélectionner les éléments pairs à partir de la fin avec :nth-last-child()

La pseudo-classe :nth-last-child() permet de sélectionner un élément en fonction de sa position en partant de la fin parmi ses frères et sœurs du même type (balise).

ul li:nth-last-child(2n) {
}

Cibler les éléments enfants pairs à partir du début avec :nth-child(even) ou :nth-child(2n)

:nth-child(odd) : Sélectionne tous les éléments pairs.

div > p:nth-child(even) {
  /* Style appliqué aux paragraphes <p> pairs enfants directs d'un élément <div> */
}

ou bien

div > p:nth-child(2n) {
   /* Style appliqué aux paragraphes <p> pairs enfants directs d'un élément <div> */
}

Cibler les éléments enfants impairs à partir du début avec :nth-child(odd) ou :nth-child(2n+1)

:nth-child(even) : Sélectionne tous les éléments impairs.

div > p:nth-child(odd) {
  /* Style appliqué aux paragraphes <p> impairs enfants directs d'un élément <div> */
}
div > p:nth-child(2n+1) {
  /* Style appliqué aux paragraphes <p> avec des numéros impairs (1, 3, 5, ...) enfants directs d'un élément <div> */
}

Ciblages précis à des positions particulières

div > p:nth-child(10n+1) {
  /* Style appliqué aux paragraphes <p> aux positions 11, 21, 31, etc. */
}
div:hover > p:nth-child(2) {
  /* Style appliqué au deuxième paragraphe <p> enfant direct d'un élément <div> lorsque la souris survole cet élément */
}

Cibler les éléments enfants selon leur type avec :first-of-type(), :last-of:type(), :nth-of-type() et :nth-last-of-type()

Les pseudo-classes :nth-of-type() et :nth-last-of-type

Au premier élément de chaque type parmi les enfants

.parent > *:first-of-type {
    /* Styles appliqués au premier élément de chaque type parmi les enfants directs de .parent */
}

Au dernier élément de chaque type parmi les enfants

.parent > *:last-of-type {    /* Styles appliqués au premier élément de chaque type parmi les enfants directs de .parent */ }

Style appliqué à chaque deuxième paragraphe

.parent > p:nth-of-type(2n) {
    /* Styles appliqués à chaque deuxième paragraphe */
    color: blue;
}

Style appliqué à chaque span impair

.parent > span:nth-of-type(odd) {
    /* Styles appliqués à chaque span impair */
    color: red;
}
Retour en haut