Dans cet article, le premier à propos des sélecteurs, nous ferons connaissance avec les sélecteurs « simples ». Ils correspondent à un ou plusieurs éléments du document, en se fondant sur son type, sa classe (class) ou son identifiant (id).

Sélecteurs de type alias sélecteurs d'éléments

Ce sélecteur, insensible à la casse dans son écriture, établit une correspondance entre nom d'élément HTML donné et nom de sélecteur. C'est le moyen le plus simple pour cibler tous les éléments d'un type donné. Voyons un exemple.

Voici un HTML :

<p>Quelle couleur aimez-vous ?</p>
<div>J'aime le bleu.</div>
<p>Je préfère le rouge !</p>

Une simple feuille de style :

/* Tous les éléments p sont rouges */
p {
  color: red;
}

/* Tous les éléments div sont bleus */
div {
  color: blue;
}

Et nous obtenons :

Apprentissage actif : sélection d'éléments différents

Pour cet apprentissage actif, le problème consiste à changer le sélecteur unique de la règle CSS, afin que les divers éléments de l'exemple soient tous stylisés. Saurez-vous un sélecteur pour appliquer le jeu de règles à plusieurs éléments à la fois ?

Si vous faites une erreur, vous pouvez tout Réinitialiser à l'aide du bouton correspondant. Si vous êtes vraiment bloqué, pressez Voir la solution pour afficher une réponse possible.

Sélecteurs de classes

Le sélecteur de classe est composé d'un point « . », suivi d'un nom de classe. Un nom de classe est une valeur, sans espace, placée dans un attribut HTML class}. Il vous appartient de choisir un nom pour la classe. Notez également que plusieurs éléments d'un document peuvent avoir la même valeur de classe et qu'un seul élément peut avoir plusieurs noms de classe séparés par une espace. Voici un exemple rapide :

Voici un peu de HTML :

<ul>
  <li class="first done">Créez un document HTML</li>
  <li class="second done">Créez une feuille de style CSS</li>
  <li class="third">Liez‑les</li>
</ul>

Une simple feuille de style :

/* L'élément de la classe « first » est mis en gras */
.first {
  font-weight: bold;
}

/* Tous les éléments de la classe « done » sont barrés */
.done {
  text-decoration: line-through;
}

Et voici le résultat :

Apprentissage actif : gestion de classes multiples

Pour cet apprentissage actif, essayez de préciser des attributs de classe sur les éléments de paragraphe pour pouvoir appliquer plusieurs effets séparés. Essayez d'appliquer une classe base-box plus une classe de rôle (editor-note ou warning) et éventuellement important, si vous voulez donner une forte importance à la boîte. Pensez à la façon dont ce type d'ensemble de règles vous permet de construire un système modulaire de styles.

Si vous faites une erreur, vous pouvez tout Réinitialiser à l'aide du bouton correspondant. Si vous êtes vraiment bloqué, pressez Voir la solution pour afficher une réponse possible.

Sélecteurs d'identifiants

Le sélecteur d'identifiant est composé d'un croisillon (#), suivi du nom d'identifiant d'un élément donné. Tout élément peut posséder un nom d'identifiant unique avec l'attribut id}. Il vous appartient de choisir un nom d'identifiant. C'est la façon la plus efficace de sélectionner un seul élément.

Important : Un nom d'ID doit être unique dans le document. Les comportements en cas d'identifiant dupliqué sont imprévisibles. Par exemple, dans certains navigateurs, seule la première occurence est prise en compte, et le reste ignoré.

Examinons rapidement un exemple — voici le HTML :

<p id="polite"> — "Bonjour."</p>
<p id="rude"> — "Sortez !"</p>

Une simple feuille de style :

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

Nous obtenons cette sortie :

Apprentissage actif : colorier les vainqueurs avec les ID

 

Pour cet apprentissage actif, donnez aux trois premières d'une compétition les couleurs or, argent et bronze appropriées. Pour ce faire, vous donnerez aux règles de la CSS 2 à 4 sélecteurs appropriés retenant les éléments pertinents en fonction de leur ID.

Si vous faites une erreur, vous pouvez tout Réinitialiser à l'aide du bouton correspondant. Si vous êtes vraiment bloqué, pressez Voir la solution pour afficher une réponse possible.

Sélecteur universel

Le sélecteur universel (*) est le joker absolu. Il permet de sélectionner tous les éléments dans une page. Comme il est rarement utile d'appliquer un même style à tous les éléments d'une page, il est souvent utilisé en combinaison avec d'autres sélecteurs (voir Combinators plus loin).

Important : Soyez prudent quand vous utilisez le sélecteur universel. Comme il s'applique à tous les éléments, son utilisation dans de grandes pages Web peut avoir un impact perceptible sur les performances : les pages Web s'affichent plus lentement que prévu. Ce sélecteur n'est pas utilisé en de nombreuses circonstances.

Voyons maintenant un exemple. D'abord le HTML :

<div>
  <p>Je pense que la boîte de contenu à juste besoin d'un <strong>encadrement</strong>
ou de <em>quelque chose</em> du même genre, mais ceci la <strong>surcharge</strong> un peu trop !</p>
</div>

Et une simple feuille de style :

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

Cet ensemble donne les résultats suivants :

Dans l'article suivant

Bravo pour avoir atteint la fin de notre premier tutoriel à propos des sélecteurs ! Nous espérons que vous avez trouvé amusant le jeu avec des sélecteurs. Maintenant que nous avons examiné le noyau des sélecteurs simples couramment utilisés, passons à des fonctionnalités plus avancées en commençant par les Sélecteurs d'attributs.

 

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Dralyab
Dernière mise à jour par : Dralyab,