Sélecteurs CSS simples — Alexandre Niveau — Université de Caen Normandie

Sélecteurs

On a vu que les règles CSS permettent d'appliquer un style à tous les éléments d'un certain type :

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

Elles sont en fait bien plus puissantes que ça !

La partie avant les accolades (ici a) est un sélecteur, en l'occurrence un sélecteur de type

On a déjà vu qu'on pouvait grouper des sélecteurs dans une seule règle :

h1, h2, h3 {
    color: red;
}

On va voir maintenant d'autres sélecteurs de base

Combinaison de sélecteurs

Si on met des éléments strong dans les titres, on ne voit pas la différence dans le résultat

Supposons alors qu'on voudrait mettre les strong en couleur dans les titres (mais pas ailleurs)

Solution : la combinaison de sélecteurs permet de sélectionner des « éléments qui sont dans des éléments »

Pour combiner deux sélecteurs, on les sépare par une espace :

h2 strong {
    color: tomato;
}

⇒ sélectionne tous les éléments strong qui ont un ancêtre de type h2

N.B. : la règle est appliquée aux éléments sélectionnés par le dernier sélecteur de la combinaison

Attention : ici le caractère « espace » est très important, contrairement à (quasiment) partout ailleurs en CSS ! Ce choix de syntaxe est contre-intuitif à tous les niveaux !

Remarque : pour que ça marche avec tous les niveaux de titre, il faut utiliser un groupe de sélecteurs :

h1 strong, h2 strong, h3 strong {
    color: tomato;
}

Classes

HTML définit un certain nombre d'éléments ayant une sémantique précise…

… mais ça ne suffit évidemment pas à couvrir tous les besoins !

Pour définir une sémantique soi-même, on utilise une classe

Attribut HTML class :

<h1>Un texte intéressant</h1>
<p class="intro">Dans ce texte, on va parler de bla bla bla</p>
<p>Bla bla bla bla</p>

Intérêt : on peut sélectionner tous les éléments ayant une certaine classe

Sélecteur de classe

Syntaxe CSS : au lieu de mettre un nom d'élément, on met un nom de classe préfixé par un point

.intro {
    font-weight: bold;
}

La règle sera appliquée à tous les éléments ayant la classe intro.

Éléments HTML génériques

Les classes permettent en quelque sorte de définir ses propres éléments HTML

On peut ajouter une classe à un élément existant, mais ça n'a pas toujours du sens

Le langage HTML a prévu des éléments génériques, qui n'ont aucune sémantique, et qui sont principalement destinés à recevoir une classe :

un élément de type bloc, le div
un élément de type inline, le span

<p>
    L'<span class="operation">addition</span> est une opération très utile.
</p>
<div class="exemple">
    Quand on fait ses courses, l'<span class="operation">addition</span>
    permet de savoir combien on va payer à la fin. Si on est plusieurs à payer,
    il faudra aussi utiliser la <span class="operation">division</span>.
</div>

Un dilemme

Dans l'exemple précédent, supposons qu'on a ces règles CSS :

.operation {
    font-weight: bold;
}
.exemple {
    background-color: aquamarine;
}

On voudrait que les noms d'opération soient en bleu foncé dans les exemples.

On pourrait utiliser une classe spécifique, comme operation-dans-exemple, mais on retrouve les inconvénients déjà cités :

pas DRY ⇒ plus difficile à maintenir (si on modifie l'apparence des opérations, il faut le faire pour deux classes)
fond et forme moins bien séparés (on ne peut pas simplement déplacer du code hors d'un exemple ou vers un exemple, il faut modifier les classes)

Ce qu'on veut, c'est simplement sélectionner les « opérations » qui sont dans des « exemples »…

Solution : combinaison de sélecteurs

Pour sélectionner les « opérations » qui sont dans des « exemples », la structure du HTML suffit : pas besoin d'informations en plus

CSS permet d'exploiter cette structure grâce à la combinaison de sélecteurs vue plus haut

Pour combiner deux sélecteurs, on les sépare par une espace :

.exemple .operation {
    color: darkgreen;
}

⇒ sélectionne tous les éléments de classe operation qui ont un ancêtre de classe exemple

Encore une fois, la règle est appliquée aux éléments sélectionnés par le dernier sélecteur de la combinaison

Donner un nom à un élément

Les classes permettent de définir ses propres « catégories » d'éléments, et leur associer des styles…

… mais parfois on veut donner un style à un élément particulier, sans définir de sémantique

On peut donner à cet élément un identifiant, c'est-à-dire un nom, avec l'attribut HTML id :

<p>Des films :</p>
<ul>
	<li id="pulpfiction">Pulp Fiction</li>
	<li id="grandevadrouille">La grande vadrouille</li>
	<li id="dracula">Dracula</li>
</ul>

Il ne doit pas y avoir plusieurs éléments avec le même identifiant sur une même page : l'identifiant doit être unique

Intérêts :

on peut faire un lien vers un élément précis de la page grâce à la syntaxe « fragment » des URL : http://example.com/page.html#pulpfiction
on peut sélectionner en CSS l'élément ayant tel identifiant

Sélecteur d'identifiant

Syntaxe CSS pour sélectionner un élément par son identifiant : identifiant préfixé par un caractère « # »

#pulpfiction {
    color: purple;
}

#grandevadrouille {
    color: brown;
}

#dracula {
    color: red;
}

Rien n'empêche d'utiliser des classes ici, mais le code fait apparaître plus clairement qu'on applique des styles pour des éléments particuliers, pas des styles généraux

Quelques précisions

Les classes sont censées avoir un sens (ex. auteur, important…), pas juste servir de raccourci à des propriétés CSS (ex. rouge, gras…)

Le code HTML doit rester sémantique : attention à ne pas multiplier les div et les classes ne servant qu'à styler