Combinateurs

Un combinateur est quelque chose qui explique la relation entre les sélecteurs CSS.

Il existe 4 type de combinateurs :

• Le sélecteur de descendance (un élément contenu dans un élément) : (espace)
• Le sélecteur enfant : >
• Le sélecteur de frère adjacent : +
• Le sélecteur de frère général : ~

Le combinateur de descendance

Le combinateur de descendance (espace) est utilisé pour désigner tous les descendants d’un élément.

En langage informatique, un descendant est un élément contenu dans un autre élément.

Exemple :

div h1 { /* Tous les titres de niveau 1 présents dans la div */
    text-align: center;
}

Dans l’exemple ci-dessus, tous les titres de niveau un descendant de la <div> - donc tous les titres de niveau 1 contenu dans la <div> - se verront assigner le style défini.

Le combinateur de sélecteur enfant

Le sélecteur enfant > est utilisé pour désigner tous les éléments étant enfants directs d’un élément.

Remarque : Ce sélecteur permet de désigner uniquement les enfants directs d’un élément.

Exemple :

div > h1 { /* Tous les titres de niveau 1 enfant de l'élément parent div */
    text-align: center;
}

Le sélecteur de frère adjacent