Sélecteur contextuel en CSS

Le sélecteur contextuel, représenté par la commande espace (' '), permet de sélectionner les balises imbriquées dans un parent donné

Syntaxe

sélecteur1 sélecteur2 {
	
}

Adressons-nous à toutes les balises p à l'intérieur des balises div et colorons-les en rouge :

<div>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

div p {
	color: red;
}

Adressons-nous à toutes les balises p à l'intérieur de l'élément avec #elem et colorons-les en rouge :

<div id="elem">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

#elem p {
	color: red;
}

Adressons-nous à toutes les balises p à l'intérieur des éléments avec la classe .block et colorons-les en rouge :

<div class="block">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

.block p {
	color: red;
}

Adressons-nous à toutes les balises b à l'intérieur des balises p, elles-mêmes situées à l'intérieur des balises div et colorons-les en rouge :

<div>
	<p>
		text <b>+</b>
	</p>
</div>

div p b {
	color: red;
}

Sélecteur d'enfant direct,
qui permet de sélectionner les éléments par imbrication directe
Sélecteur de frère adjacent,
qui permet de sélectionner un élément par son voisin
Sélecteur de frères,
qui permet de sélectionner les éléments après un élément donné
Sélecteur universel,
qui permet de sélectionner tous les éléments