Avant même de parler de couleurs, de mise en page ou d'animations, CSS doit répondre à une question simple : à quel élément appliquer cette règle ? C'est le rôle du sélecteur, la partie qui précède les accolades dans chaque bloc de style.
Un sélecteur mal choisi est la cause silencieuse de la moitié des bugs visuels : une règle qui ne s'applique pas, ou qui s'applique à trop d'éléments à la fois. Comprendre les grandes familles de sélecteurs évite ces mauvaises surprises dès les premières lignes de CSS.
Définition
Un sélecteur CSS est le motif qui indique au navigateur quels éléments HTML doivent recevoir les déclarations de style qui suivent. Il se place juste avant les accolades : selecteur { propriete: valeur; }. Il peut cibler un seul élément, une poignée d'éléments partageant une caractéristique, ou la totalité de la page.
Les grandes familles de sélecteurs
CSS propose plusieurs façons de désigner un élément, et elles se combinent entre elles. Le sélecteur de type cible une balise HTML directement, comme p ou button. Le Sélecteur de classe cible tout élément portant un attribut class précis, avec un point devant le nom. Le Sélecteur d'ID cible un unique élément grâce à son attribut id, précédé d'un dièse. Le Sélecteur d'attribut cible un élément selon la présence ou la valeur d'un de ses attributs HTML, entre crochets. Le Sélecteur universel, l'étoile, cible absolument tout ce qui existe sur la page.
À cela s'ajoutent les pseudo-classes et les pseudo-éléments, qui ciblent un état ou une portion de rendu plutôt qu'une balise, mais ce sont des familles suffisamment riches pour mériter leur propre définition à part entière.
Exemple concret
/* sélecteur de type */
p {
color: #333;
}
/* sélecteur de classe */
.carte {
border-radius: 8px;
}
/* sélecteur d'ID */
#en-tete {
position: sticky;
}
/* sélecteur d'attribut */
input[type="email"] {
border-color: #999;
}
/* sélecteur universel */
* {
box-sizing: border-box;
}Chacune de ces syntaxes répond à un besoin différent. Le choix du bon sélecteur n'est pas une question de goût : c'est une question de portée et de facilité à maintenir le code plus tard.
Combiner les sélecteurs
Les familles de sélecteurs ne s'excluent pas entre elles : elles se composent. button.primaire cible uniquement les boutons qui portent aussi la classe primaire. nav a[target="_blank"] cible les liens qui s'ouvrent dans un nouvel onglet, à l'intérieur d'une balise nav. Cette composition, associée aux combinateurs qui décrivent la relation entre deux sélecteurs, permet de viser très précisément un élément sans jamais toucher au HTML de la page.
| Famille | Syntaxe | Cible |
|---|---|---|
| Type | div | Toutes les balises div |
| Classe | .bouton | Tout élément avec class="bouton" |
| ID | #header | L'unique élément avec id="header" |
| Attribut | [type="text"] | Tout élément portant cet attribut |
| Universel | * | Tous les éléments de la page |
Le piège du sélecteur trop large ou trop précis
Un sélecteur trop large, comme un sélecteur de type utilisé seul, touche tout ce qui partage cette balise, y compris des éléments auxquels on n'avait pas pensé au départ. Un sélecteur trop précis, en enchaînant plusieurs classes ou en s'appuyant sur un id, devient difficile à réutiliser ailleurs et pénible à corriger quand la page évolue. Notre formation HTML et CSS revient sur ces choix de sélecteurs avec des exemples concrets, pour apprendre à écrire des règles qui restent faciles à maintenir des mois plus tard.
Questions fréquentes
Oui, en les séparant par une virgule. h1, h2, h3 { margin-top: 0; } applique la même déclaration aux trois balises sans dupliquer le bloc de style trois fois.
Un sélecteur désigne un élément selon sa nature, comme son type, sa classe, son id ou un attribut, tandis qu'un combinateur décrit la relation entre deux sélecteurs, par exemple un espace pour dire descendant ou un chevron pour dire enfant direct.
Non, mais il est utile de reconnaître les familles principales pour comprendre du code existant. Au quotidien, le sélecteur de classe couvre déjà l'essentiel des besoins d'un projet CSS.