Bien cibler un élément

Vous l'avez compris, avec l'héritage des propriétés, l'un des plus gros challenges en CSS est de bien cibler son sélecteur. Pour cela, plusieurs sélecteurs nous sont mis à disposition.

X Y

Il est possible de cibler un élément contenu dans un autre élément.
Par exemple, si j'ai un paragraphe dans une <div> et un autre à l'extérieur :

				
					<div>
						<p>
							Un super paragraphe dans une div.
						</p>
					</div>
					<p>
						Un mega paragraphe solo.
					</p>
				
			

Pour cibler uniquement le paragraphe dans ma div, je vais utiliser :

				
					div p{
						color: red;
					}
				
			

Ce qui me donne :

X > Y

Dans le cas où j'aurais plusieurs éléments imbriqués de même nature compris dans ma <div>, je peux utliser > pour cibler celui qui est imbriqué directement après mon élément référent.

Par exemple, j'ai ici :

• un paragraphe hors de ma <div>,
• un paragraphe directement dans ma <div>,
• un paragraphe dans une section qui est comprise dan ma <div>.

				
					<div>
						<p>
							Un super paragraphe dans une div.
						</p>
						<section>
							<p>
								Un super paragraphe dans une section qui est dans une div.
							</p>
						</section>
					</div>
					<p>
						Un mega paragraphe solo.
					</p>
				
			

Pour cibler uniquement le paragraphe dans ma <div>, sans impacter celui présent dans la <section>, je vais ajouter un > dans mon CSS :

				
					div > p{
						color: red;
					}
				
			

Voilà le résultat :

X + Y

Le sélecteur + permet de cibler un élément placé directement après un autre.
Par exemple, nous allons cibler uniquement les paragraphes situés directement après les titres de niveau 2 :

				
					<h2>
						Un titre de niveau 2
					</h2>
					<p>
						Un super paragrahe rouge.
					</p>
					<p>
						Un super paragrahe.
					</p>
					<h2>
						Un titre de niveau 2
					</h2>
					<p>
						Un super paragrahe rouge.
					</p>
				
			

				
					h2 + p{
						color: red;
					}
				
			

Voilà le résultat :

X ~ Y

À la différence du +, le sélecteur ~ permet de cibler n'importe quel élément Y qui se trouve derrière l'élément X.
Par exemple, nous allons ici cibler tous les paragraphes situés derrière les balises <h2> (et pas seulement ceux situés directement après).

				
					<p>
						Un super paragrahe.
					</p>
					<h2>
						Un titre de niveau 2
					</h2>
					<p>
						Un super paragrahe rouge.
					</p>
					<p>
						Un super paragrahe rouge.
					</p>
					<h3>
						Un titre de niveau 3
					</h3>
					<p>
						Un super paragrahe rouge.
					</p>
				
			

				
					h2 ~ p{
						color: red;
					}
				
			

Résultat, seul le paragraphe situé avant le premier <h2> n'est pas ciblé :

*

L'étoile * permet de cibler tous les éléments :

				
					*{
						color: red;
					}
				
			

Ici, tous les élément de ma page auront une couleur rouge.

				
					header *{
						color: green;
					}
				
			

Ici, tous les élément compris dans le header auront une couleur verte.

Mutualisation des propriétés

Il est possible d'appliquer plusieur propriétés à des sélecteurs différents en les séparant par des virgules. Par exemple, nous allons pouvoir simplifier :

				
					p{
						color: red;
					}
					h2{
						color: red;
					}
					ol li{
						color: red;
					}
				
			

Par :

				
					p,
					h2,
					ol li{
						color: red;
					}