Sélecteurs hiérarchiques

Atteindre des éléments dans une page peut se faire par des déclarations css bien différents. Il n’y a pas de règles, mais des bonnes pratiques (mais elles changent suivant les époques).

Commençons ici par les bases.

Précédent | 6/16 | Suivant

Rappel : sélectionner les éléments directement

Atteindre un tag

a {
 color:red;
 text-decoration:none;
}

Atteindre un id

#truc {
 color:yellow;
 font-size:3em;
}

Atteindre une classe

.machin {
 color:green;
 margin-bottom:1em;
}

Combinaisons

Associer sans espace deux sélecteurs permet de joindre un élément qui possède les deux sélecteurs en même temps.

div.machin {}
Permet d’atteindre un élément div qui possède la classe "machin"
<div class="machin">

h1#truc {}
Permet d’atteindre un élément h1 qui possède l’id "truc"
<h1 id="truc">

#truc.machin {}
Permet d’atteindre un élément qui possède à la fois l’id "truc" et la classe "machin"
<p id="truc" class="machin">

.bazar.machin {}
Permet d’atteindre un élément qui possède à la fois la classe "bazar" et la classe "machin"
<p class="bazar machin">