Aller au contenu

L'imbrication en CSS

L'imbrication (nesting en anglais) permet d'écrire un sélecteur css et ses règles à l'intérieur d'un autre sélecteur.

L'avantage étant de regrouper ensemble des règles relatives à un même élément HMTL.

Libre à vous d'utiliser l'imbrication dans vos projets. Si ça complique votre compréhension ne l'utilisez pas.

Exemple avec css traditionnel
.card {
    background-color: white;
}

.card h2 {
    color: blue;
}

.card p {
    font-size: 1rem;
}

.card a {
    color: red;
}

Dans cet exemple on veut appliquer des règles à la classe card ainsi qu'à toutes les balises enfants h2, p et a. Avec l'imbrication ça donnerait ceci

Avec imbrication
.card {
    background-color: white;

    h2 {
        color: blue;
    }

    p {
        font-size: 1rem;
    }

    a {
        color: red;
    }
}

Le symbole &

On peut remplacer le sélecteur parent par le symbole &. C'est très utiliser avec les pseudo-classes.

Symbole &
.button {
    background-color: blue;

    &:hover {
        background-color: darkblue;
    }
}

Attention à ne pas vous tromper quand vous utilisez le symbole &.

/* Une classe title qui est enfant d'une classe card */
.card {
    .title {
        color: red;
    }
}
/* Est équivalent à */
.card .title {
    color: red;
}

/* Un élément qui à les classes card et title */
.card {
    &.title {
        color: red;
    }
}
/* Est équivalent à */
.card.title {
    color: red;
}

À retenir

  • L'imbrication fonctionne toujours avec une relation de sélecteur parent et enfant.
parent {
    propriété: valeur;

    enfant {
        propriété: valeur;
    }
}
  • Essayez de ne pas imbriquer trop profondément, un seul niveau suffit aisément.
  • Le symbole & est très pratique pour ne pas répéter le sélecteur parent.
  • Une bonne pratique est de regrouper les sélecteurs qui sont dépendant d'un même sélecteur parent ensemble.

Médiagraphie