Yes You Web !

Publié le 9 février 2019

Utiliser les différents sélecteurs CSS seuls, c’est pratique et ça se fait tout à fait bien. Mais dans certains cas, les sélecteurs CSS deviennent encore plus efficaces quand vous les combinez afin d’affiner encore vos sélections. Il y a plusieurs méthodes pour grouper ou combiner les sélecteurs CSS les uns aux autres. Nous allons étudier ces différentes relations en détail dans cet article.

Les différents groupes / combinateurs

On compte 4 combinateurs de sélecteurs. Résumons-les dans un tableau, ça sera plus parlant. A et B sont des sélecteurs simples.

NOM SYNTAXE SELECTION3
Combinateur descendant A B Ce combinateur, matérialisé par un simple espace, cible un élément B contenu dans un élément A, quelque soit son degré de parenté : un enfant ou un enfant d’enfant.
Combinateur enfant A > B Contrairement au précédent, ce combinateur, matérialisé par un supérier, cible un élément B qui est l’enfant direct d’un élément A.
Combinateur adjacent A + B Ce combinateur, matérialisé par un plus, cible un élément B immédiatement précédé par un élément A. Le mot adjacent est important : seul le premier élément après l’élément A sera ciblé.
Combinateur général sibling A ~ B Ce combinateur cible un élément B précédé par un élément A. Contrairement au combinateur adjacent où seul le premier frère est ciblé, ici, tous les frères sont concernés.

Quelques exemples

Cela vous paraît un peu flou encore ? Nous allons regarder un exemple de chaque combinateur pour mieux comprendre comment ils fonctionnent dans votre code.

Combinateur descendant

Code CSS

Copier

Code HTML

Copier

Et le résultat en image : les 3 paragraphes qui sont dans mon div ont bien un background fushia, dont le 3è qui est un enfant d’enfant. En revanche, ceux qui ne sont pas dedans n’en ont pas.

Yes You Web !

Combinateur enfant

Code CSS

Copier

Code HTML

Copier

Et le résultat en image : vous noterez qu’ici, mon 3è paragraphe n’a pas de fond blanc, car dans le cas du combinateur enfant, les enfants d’enfant ne sont pas pris en compte.

Yes You Web !

Combinateur adjacent

Code CSS

Copier

Code HTML

Copier

Et le résultat en image : ici, seul l’élément qui se trouve juste après le div est ciblé.

Yes You Web !

Combinateur général sibling

Code CSS

Copier

Code HTML

Copier

Et le résultat en image : dans le combinateur général sibling, tous les frères qui suivent les paragraphes contenus dans le div sont ciblés.

Yes You Web !

Conclusion

Voilà, nous espérons que cet article vous aura permis de tout comprendre des combinateurs. Cela fonctionne avec tous les éléments html alors amusez-vous !
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !