Les 4 sélecteurs de combinaison !

Les sélecteurs de css3, partie 2 !

On a vu les 5 sélecteurs de bases en CSS qui permettent de cibler des éléments HTML pour leur appliquer tout un tas de règles. Avec ces sélecteurs, on peut déjà faire plein de trucs sympathiques sur une page web. Mais il en existe encore d’autres qui étends encore plus les possibilités de sélections, voyons un nouveau type de sélecteurs qu’on appelle des sélecteurs combinatoires ! C’est parti !

Les sélecteurs de combinaisons, comme son nom l’indique, vont permettre de combiner deux ou plusieurs sélecteurs de bases dans le but d’affiner une sélection. Cela donne d’autres moyens de cibler des éléments HTML, qui plus est, de façon beaucoup plus précise qu’avec des sélecteurs de bases. Bien sûr, l’utilisation des sélecteurs combinatoire se fait obligatoirement avec d’autres types de sélecteurs comme les basiques ou les pseudo-éléments/classes (qu’on verra dans un prochain article) à cause de leur nature.

En effet, ce qui distingue les sélecteurs de combinaisons aux autres, c’est que ce type sélecteur se présente sous la forme de ce qu’on appelle des combinateurs, qui sont grosso modo des opérateurs. C’est le même principe que sur les calculs mathématiques, pas possibles de faire un calcul du genre addition ou soustraction sans deux nombres minimum ! Le combinateur serait l’opérateur "+" ou le "-" d’un calcul.

 

X Y : Le sélecteur de descendants…

… avec le combinateur  »  » !

Le plus simple des quatre, lorsqu’on ajoute seulement un ou plusieurs espaces entre deux sélecteurs, l’ensemble des sélecteurs devient un sélecteur d’élément descendant. Ce sélecteur permet de cibler un élément HTML qui est dans un autre élément.

En utilisant deux sélecteurs de types et le combinateur, la règle s’appliquera à tout les éléments Y qui sont à l’intérieur de tous les éléments X !

div span{
 background-color : red;
}
<div>
	<span> blue ! </span>
		<p class="paragraphe">
			<span> rien ! </span>
		</p>
	<span> blue ! </span>
</div>
<span> rien ! </span>

En appliquant cette règle CSS, tous les span qui sont à l’intérieur d’un div auront un fond rouge.

Il est intéressant de voir que l’élément Y n’a pas besoin de descendre directement de X, il peut y avoir plusieurs autres éléments entre eux.

Bien entendu, ce sélecteur ne se limite pas qu’aux sélecteurs de types, on peut très bien utiliser les classes, les identifiants, etc., et il est tout à fait possible de combiner plus de deux sélecteurs, si j’écris ça :

div p.paragraphe span{
 background-color : red;
}

La sélection sera encore plus précise et seul le span à l’intérieur de la balise p dans l’exemple aura un fond rouge.

 

X > Y : Le sélecteur d’enfants…

… avec le combinateur « > » !

Un titre un peu chelou, mais ne vous en préoccupez pas 🙂 . Ce sélecteur est le même que celui d’en haut à l’exception que l’élément Y soit le fils direct de X. S’il y a d’autres éléments entre les deux, la règle ne s’appliquera pas. Pour faire cette sélection, il faut utiliser le combinateur ">" entre deux sélecteurs de bases.

div &amp;amp;amp;gt; span{
 background-color : blue;
}
<div>
	<span> red ! </span>
		<p class="paragraphe">
			<span> red ! </span>
		</p>
	<span> red ! </span>
</div>
<span> rien ! </span>

Et toujours comme plus haut, ce sélecteur n’est ni limité par le nombre ni limité par le type de sélecteurs. D’ailleurs, c’est la même chose pour tous les sélecteurs de combinaison !

 

X ~ Y: Le sélecteur de voisins…

… avec le combinateur « ~ » !

Voici un sélecteur plus subtil à comprendre, la sélection va se faire sur tous les Y qui suivent un élément X. De plus, il faut que les deux éléments soient au même niveau, disons plutôt qu’il ait le même père tous les deux.

p ~ span{
 background-color : green;
}
<div>
	<span> rien ! </span>
		<p class="paragraphe">
			<span> rien ! </span>
		</p>
	<span> green ! </span>
	<span> green ! </span>
</div>
<span> rien ! </span>

Les span qui sont après la balise p auront un fond vert. Notez qu’avec ce sélecteur, la règle ne s’appliquera ni a ceux qui sont avant l’élément X, donc la balise p dans notre exemple, ni à ceux qui ne sont pas du même niveau !

Remarquez, j’aurais pu utiliser la sélection div p ~ span dans l’exemple, le résultat aurait été la même chose !

 

X + Y: Le sélecteur de voisins direct…

… avec le combinateur « + » !

Même principe que pour le voisin vu en haut, simplement ce sélecteur s’applique à l’élément directement proche de X ! La règle ne s’appliquera pas sur tous les autres Y qui suivent le premier.

p + span{
 background-color : yellow;
}
<div>
	<span> rien ! </span>
		<p class="paragraphe">
			<span> rien ! </span>
		</p>
	<span> yellow ! </span>
	<span> rien ! </span>
</div>
<span> rien ! </span>

Seul le span suivant directement la balise p aura un fond jaune !

Et voilà, avec ces sélecteurs, vous avez encore plus d’options pour pouvoir écrire du CSS !
A++ 🙂

Partager l’article :
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Laisser un commentaire

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.