4.4 Sélecteurs CSS

Sélecteurs de balises génériques

Le ciblage des balises HTML génériques est simple : utilisez simplement le nom de la balise.

a{ /* Liens */ }<br>p{ /* Paragraphes */ }
ul{ /* Lists non ordonnées */ }
li{ /* Eléments de liste */ }

Il existe un lien direct entre le nom de la balise HTML et le sélecteur CSS utilisé.

Classes

Étant donné que nous ne souhaitons probablement pas attribuer un style identique à tous les paragraphes ou à tous les titres, nous devons les différencier.

De tous les attributs HTML, l’attribut de classe -est le plus important pour CSS. Cela nous permet de définir un groupe d’éléments HTML que nous pouvons cibler spécifiquement. Il suffit de mettre un point . devant le nom de la classe que vous souhaitez utiliser :

.date {color: red;}

D’un côté, il y a l’attribut HTML class avec la valeur date. Il doit correspondre au nom de la classe CSS.

Vous pouvez utiliser n’importe quel nom pour votre classe CSS, à condition qu’elle ne commence pas par un nombre.

Le sélecteur de classe .date ciblera tous les éléments HTML dotés de l’attribut class="date". Ainsi, les éléments HTML suivants seront tous stylisés :

<p class="date">Samedi 21 Fév.</p>
<p>L'événement aura lieu <em class="date">Samedi</em>.</p>

Gardez à l’esprit que le nom de la balise n’a pas d’importance. Seul l’attribut HTML class l’est.

Identifiants – IDs

Vous pouvez également utiliser l’attribut id dans votre code HTML et le cibler avec un dièse / hash # dans votre code CSS :

#tagline{ color: orange;}

<h1 id="tagline">Ce titre est de couleur orange.</h1>

Les IDs sont similaires aux classes, car ils reposent sur un attribut HTML.

Exemple

<p></p>

<div class="global"></div>

<ul id="menu">

<ol class="dico">
  <li>Un cobaye</li>
  <li>Des cobaux</li>
</ol>

Combinaison de sélecteurs

Reprenons notre exemple précédent dans lequel nous voulons que nos dates soient rouges :

.date {
  color: red;
}

<p class="date">Samedi 21 Fév.</p>
<p>L'événement aura lieu <em class="date">Samedi</em>.</p>

Que faire si nous voulons que nos dates qui sont dans les éléments em deviennent bleues ?
Nous pouvons ajouter la règle CSS suivante :

em.date {
  color: blue;
}

La règle css em.date combine :

• Un sélecteur de balise em
• Un sélecteur de balise .date

Il s’appliquera uniquement aux éléments HTML <em class="date"></em>. Cela n’affectera pas les autres .date ou em.

Sélecteurs de hiérarchie

Un espace dans un sélecteur définit une relation ancêtre / descendant.
Disons que nous voulons que les liens dans notre en-tête soient en rouge :

header a{
  color: red;
}

Cela peut être lu de droite à gauche comme suit : “Sélectionnez tous les éléments a qui sont dans un élément header”.
Cela évitera que tous les autres liens (qui ne figurent pas dans l’en-tête) soient affectés.

Sélecteurs de pseudo-classes

Les éléments HTML peuvent avoir différents états. Le cas le plus fréquent est lorsque vous survolez un lien. En CSS, il est possible d’appliquer un style différent lorsqu’un tel événement se produit.

Les sélecteurs de pseudo-classes sont attachés aux sélecteurs habituels et commencent par un signe deux-points  :

a {
  color: blue;
}

a:hover {
  color: red;
}