Sélecteurs de combinateurs CSS | Expliqué

Les combinateurs de CSS décrivent la relation entre certains éléments et sur la base de cette relation, vous pouvez styliser des éléments. Cela est utile lorsque vous souhaitez coiffer certains éléments en même temps plutôt que de styler les éléments individuellement. Par exemple, vous pouvez styliser tous les frères et sœurs généraux d'un élément en utilisant le sélecteur de combinateur Gener General et sœurs CSS. Les sélecteurs CSS Combinator sont les suivants.

1. Sélecteur descendant
2. Sélecteur d'enfants
3. Sélecteur de frère adjacent
4. Sélecteur de frères et sœurs

Tous ces éléments sont expliqués en profondeur ici.

Sélecteur descendant

Dans le but de sélectionner tous les successeurs d'un élément, le sélecteur descendant est utilisé. Les successeurs incluent tous les enfants d'un élément, que ce soit un enfant direct ou un enfant à plusieurs niveaux dans l'arbre Dom. Il est représenté en utilisant un espace entre l'élément parent et enfant.

Syntaxe

enfant parent
valeur de la propriété;

Exemple

L'exemple ci-dessous montre le fonctionnement du sélecteur descendant.

Html

Je suis un successeur de la div.

Je suis aussi un successeur de la div.

Je ne suis pas un successeur de la div.

Dans le code HTML ci-dessus, nous avons créé un élément et imbriqué deux

Éléments à l'intérieur de cette div. En plus de cela, nous avons également créé un

élément à l'extérieur de l'élément.

CSS

div
rembourrage: 5px;
Border: 2px noir solide;

div p
Color en arrière-plan: rose;

Ici, nous donnons d'abord un rembourrage et une bordure à la div et ensuite en utilisant le combinateur descendant une couleur de fond rose est donnée à tous les descendant

Éléments du div.

Sortir

Les successeurs de l'élément sont mis en évidence en rose.

Sélecteur d'enfants

Comme son nom l'indique, l'enfant combinateur sélectionne tous les enfants d'un élément. Il est différent du sélecteur descendant d'une manière qu'il sélectionne uniquement les enfants directs d'un élément. De plus, il est représenté par un signe supérieur à (>).

Syntaxe

parent> enfant
valeur de la propriété;

Exemple

Nous allons utiliser un exemple similaire à celui ci-dessus pour démontrer le fonctionnement du sélecteur de combinateur d'enfants.

Html

C'est un enfant immédiat.

C'est aussi un enfant immédiat.

Depuis que je suis présent à l'intérieur de l'élément de section donc, je suis un descendant de la div mais pas un enfant direct.

Je ne suis pas un enfant.

Je ne suis pas non plus un enfant.

Ici, nous avons créé une div et deux

éléments et un élément à l'intérieur du div. La balise niche un

élément. En plus de ces deux autres

les éléments sont générés mais en dehors du div.

CSS

div
rembourrage: 5px;
Border: 2px noir solide;

div> p
Color en arrière-plan: hotpink;

Nous utilisons l'enfant Combinator pour donner une couleur hotpink au direct

Enfants de Div, en outre, nous avons fourni un peu de rembourrage et de frontière à la div.

Sortir

Le sélecteur de combinateur d'enfants fonctionne correctement.

Sélecteur de frère adjacent

Ce sélecteur est utilisé dans le but de styliser les frères et sœurs adjacents. Il est représenté en utilisant un signe plus (+) entre les deux éléments.

Syntaxe

élément + élément
valeur de la propriété;

Exemple

Supposons que vous vouliez styliser un

élément qui est un frère adjacent de l'élément.

Html

Je suis un enfant immédiat.

Je suis aussi un enfant immédiat.

Je suis un frère adjacent.

Je ne suis pas un frère adjacent.

Pour démontrer le fonctionnement du combinateur de frères et sœurs adjacent, nous avons créé certains

Éléments à l'intérieur et à l'extérieur d'un élément.

CSS

div
rembourrage: 5px;
Border: 2px noir solide;

div + p
couleur violet;
Style de police: italique;
Police-poids: Bold;

En utilisant le sélecteur de frères et sœurs adjacent, nous donnons de la couleur violette, du style de police italique et du poids de police audacieux

frère de la div.

Sortir

Le frère adjacent de l'élément div a été stylé à l'aide du combinateur de frères et sœurs adjacent.

Sélecteur de frères et sœurs

Comme son nom l'indique, ce combinateur CSS stylise tous les frères et sœurs d'un élément qui partagent le même parent. Il représenté par un signe Tilde (~).

Syntaxe

élément ~ élément
valeur de la propriété;

Exemple

Nous allons utiliser l'exemple utilisé dans la section ci-dessus pour voir comment ce combinateur fonctionne.

CSS

div ~ p
couleur violet;
Style de police: italique;
Police-poids: Bold;

En utilisant le sélecteur de frères et sœurs généraux, nous donnons du style à tous les

frères et sœurs de l'élément div.

Sortir

Tous les frères et sœurs généraux de l'élément div ont été stylés avec succès.

Conclusion

Un sélecteur de combinateur CSS sélectionne des éléments sur le baiss de leur relation avec d'autres éléments. Il y a quatre sélecteurs de combinateurs dans CSS. UN sélecteur descendant styles tous les successeurs d'un élément, un sélecteur d'enfants Style les enfants directs d'un élément, un frère adjacent sélecteur styles les frères et sœurs d'un élément qui vient juste après cet élément, et un sélecteur de frères et sœurs styles tous les frères et sœurs d'un élément. Cet article décrit ces combinateurs en détail ainsi que des exemples appropriés.