Les combinateurs et les groupes de sélecteurs en CSS

Les combinateurs et les groupes de sélecteurs en CSS

Publié le 2 juin 2018

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.

NOMSYNTAXESELECTION
Combinateur descendantA BCe 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 enfantA > BContrairement 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 adjacentA + BCe 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 siblingA ~ BCe 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

div p {
    background-color: #e6007e;
}
Code CSS
<div>
  <p>1er paragraphe dans mon div.</p>
  <p>2ème paragraphe dans mon div.</p>
  <span><p>3ème paragraphe dans mon div.</p></span>
</div>

<p>Un 4ème paragraphe qui n'est pas dans mon div.</p>
<p>Et le 5ème non plus.</p>
Code HTML

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 - Combinateurs CSS

Combinateur enfant

div > p {
    background-color: #e6007e;
}
Code CSS
<div>
  <p>1er paragraphe dans mon div.</p>
  <p>2ème paragraphe dans mon div.</p>
  <span><p>3ème paragraphe dans mon div.</p></span>
</div>

<p>Un 4ème paragraphe qui n'est pas dans mon div.</p>
<p>Et le 5ème non plus.</p>
Code HTML

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 - Combinateurs CSS

Combinateur adjacent

div + p {
    background-color: #e6007e;
}
Code CSS
<div>
  <p>1er paragraphe dans mon div.</p>
  <p>2ème paragraphe dans mon div.</p>
 </div>

<p>Un 3ème paragraphe qui n'est pas dans mon div.</p>
<p>Et le 4ème non plus.</p>
Code HTML

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

Yes You Web - Combinateurs CSS

Combinateur général sibling

div ~ p {
    background-color: #e6007e;
}
Code CSS
<p>Mon 1er paragraphe tout seul</p>

<div>
  <code>Un peu de code dans un div.</code>
  <p>Un 2è paragraphe dans un div.</p>
</div>

<p>Mon 3ème paragraphe tout seul.</p>
<code>Un peu de code tout seul.</code>
<p>Et un 4è paragraphe tout seul.</p>
Code HTML

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 - Combinateurs CSS

 

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 cet article vous a plu, vous pouvez le partager sur les réseaux sociaux.
Si vous avez des questions, posez-les en commentaires ci-dessous. Et n’hésitez pas à partager vos propres retours d’expérience !

imprimer
Marine LE GUERNIGOU

Marine LE GUERNIGOU

Consultante web freelance, plus de 15 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi...
Marine LE GUERNIGOU

0 Avis

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.