Derniers tutoriels de développement web
 

CSS combinators


CSS Combinators

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

Un sélecteur CSS peut contenir plus d'un sélecteur simple. Entre les sélecteurs simples, nous pouvons inclure un combinateur.

Il y a quatre combinateurs différents dans CSS3:

  • sélecteur descendant (space)
  • sélecteur d'enfant (>)
  • sélecteur de frère adjacent (+)
  • sélecteur général des frères et sœurs (~)

Selector Descendant

Le sélecteur descendant correspond à tous les éléments qui sont les descendants d'un élément spécifié.

L'exemple suivant sélectionne tous les <p> éléments à l' intérieur <div> éléments:

Exemple

div p {
    background-color: yellow;
}
Essayez - le vous - même »

Sélecteur enfant

Le sélecteur d'enfant sélectionne tous les éléments qui sont les enfants immédiats d'un élément spécifié.

L'exemple suivant sélectionne tous les <p> éléments qui sont des enfants immédiats d'un <div> élément:

Exemple

div > p {
    background-color: yellow;
}
Essayez - le vous - même »

Selector Sibling Adjacent

Le sélecteur de frère adjacent sélectionne tous les éléments qui sont les frères et sœurs adjacents d'un élément spécifié.

éléments fratries doivent avoir le même élément parent, et «adjacent» signifie «immédiatement après».

L'exemple suivant sélectionne tous les <p> éléments qui sont placés immédiatement après <div> éléments:

Exemple

div + p {
    background-color: yellow;
}
Essayez - le vous - même »

Général Selector Sibling

Le sélecteur général de frère sélectionne tous les éléments qui sont frères et sœurs d'un élément spécifié.

L'exemple suivant sélectionne tous les <p> éléments qui sont frères et sœurs de <div> éléments:

Exemple

div ~ p {
    background-color: yellow;
}
Essayez - le vous - même »

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»