Sélecteurs CSS avancés

On peut créer des sélecteurs CSS de bien des façons. Voici une liste de quelques sélecteurs avancés :

* - le sélecteur universel

Ce sélecteur s'applique à chaque élément de la page ou, s'il est précédé d'un parent, à chaque élément à l'intérieur de ce parent.

1* {
2  color: red;
3}

Ici, chaque élément de la page reçoit un texte rouge.

# - le sélecteur d'ID

Le sélecteur d'ID sélectionne un élément HTML avec un identifiant spécifique. Il est recommandé d'utiliser les classes pour la mise en forme, mais il arrive parfois de styliser un seul élément unique.

1#myid {
2  color: red;
3}

Cette règle ne change la couleur que d'un seul élément : celui qui a l'attribut id="myid".

element element - le sélecteur descendant

Un espace entre les sélecteurs signifie « à l'intérieur » : la règle atteint chaque élément correspondant au second sélecteur qui se trouve n'importe où à l'intérieur d'un élément correspondant au premier - à n'importe quel niveau d'imbrication.

1div p {
2  color: brown;
3}

Ici, chaque paragraphe situé dans un <div> devient marron, y compris un paragraphe imbriqué plus profondément, par exemple dans une <section> à l'intérieur de ce div. Les paragraphes en dehors des div ne changent pas. Le sélecteur enfant > décrit plus bas est plus étroit : il ne fonctionne que sur les enfants directs.

element + element - le sélecteur de frère adjacent

Ce sélecteur fait référence à un élément adjacent. Il sélectionnera l'élément qui apparaît directement après l'élément mentionné précédemment.

1h2 + p {
2  font-size: 18px;
3}

Ici, le paragraphe situé juste après le titre <h2> aura une taille de police de 18px.

element > element - le sélecteur enfant

Ce sélecteur ne sélectionne que les enfants directs - ceux qui se trouvent exactement un niveau en dessous du sélecteur parent.

1div > p {
2    color: blue;
3}

Seuls les enfants directs de <div> seront colorés en bleu.

element ~ element - le sélecteur de frère général

Ce sélecteur fait référence aux éléments frères. Il sélectionnera les éléments qui apparaissent après l'élément mentionné précédemment au même niveau. Contrairement à +, qui ne prend que le voisin le plus proche, ~ sélectionne tous les frères qui suivent.

1h2 ~ p {
2    font-weight: bold;
3}

Tous les paragraphes situés après le titre <h2> au même niveau seront en gras.

element[attribute] / element[attribute="value"]

Le sélecteur d'attribut HTML permet de styliser les éléments qui ont un attribut spécifique, par exemple href, ou ceux dont la valeur de l'attribut href est égale à "https://google.com".

En CSS, il existe plusieurs autres types de sélecteurs d'attribut pour une sélection et une mise en forme précises des éléments :

• a[href*="google"] - L'astérisque (*) signifie que la valeur indiquée doit apparaître n'importe où dans la valeur de l'attribut. Par exemple, ce sélecteur sélectionnera tous les liens (<a>) dont l'attribut href contient le mot "google", qu'il soit au début, au milieu ou à la fin de la valeur de l'attribut.

• a[href^="http"] - Le symbole ^ signifie que la valeur indiquée doit apparaître au début de la valeur de l'attribut. Par exemple, ce sélecteur sélectionnera tous les liens dont l'attribut href commence par "http". Cela s'appliquera aussi bien à "http" qu'à "https".

• a[href$=".com"] - Le signe dollar ($) signifie que la valeur indiquée doit apparaître à la fin de la valeur de l'attribut. Par exemple, ce sélecteur sélectionnera tous les liens dont l'attribut href se termine par ".com". Cela s'appliquera aux URL avec le domaine ".com".

• a[data-categorie="papyrus"] - sélectionne les éléments dont l'attribut personnalisé data-categorie vaut "papyrus". Tu peux inventer des attributs data-*, mais le sélecteur doit donner le nom complet : le CSS n'a pas de joker pour une partie du nom d'attribut, et le navigateur lit [data-*="value"] comme un attribut data- avec l'opérateur *=.

• a[foo~="bar"] - Le tilde (~) permet de sélectionner un attribut qui a différentes valeurs séparées par des espaces. Par exemple, ce sélecteur sélectionnera les éléments dont l'attribut "foo" a la valeur "bar" ou dont la valeur "bar" apparaît comme l'un de plusieurs mots séparés par des espaces.

• a:not(selector) - Une pseudo-classe de négation qui sélectionne tous les éléments sauf ceux indiqués entre les parenthèses de :not(). Par exemple, ce sélecteur sélectionnera tous les liens (<a>) qui n'ont pas la classe indiquée dans le sélecteur à l'intérieur de :not().

Avec ces sélecteurs d'attribut, tu peux sélectionner plus précisément les éléments de la page et personnaliser leur mise en forme en fonction des valeurs d'attribut.

Exercice : Sélecteurs CSS avancés

Dans cet exercice, tu vas apprendre à utiliser les sélecteurs CSS avancés pour styliser précisément les éléments d'une page. Ta tâche sera de créer une page web avec différents éléments mis en forme à l'aide de ces sélecteurs.

Étape 1 : Créer une structure de document HTML de base

D'abord, crée un nouveau fichier HTML et ajoute une structure de document HTML de base. Ajoute différents éléments qui seront mis en forme à l'aide de sélecteurs CSS avancés.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lier le fichier CSS -->
7  <title>Sélecteurs CSS avancés</title>
8</head>
9<body>
10  <h2>Titre 2</h2>
11  <p>Paragraphe après le titre 2</p>
12  <div id="parent">
13    <p>Enfant direct du div</p>
14    <span>Span à l'intérieur du div</span>
15  </div>
16  <h2>Titre 2</h2>
17  <p>Paragraphe après un autre titre 2</p>
18  <a href="https://example.com">Lien vers Example</a>
19  <a href="https://google.com">Lien vers Google</a>
20  <a href="https://example.com">Un autre lien vers Example</a>
21  <ul>
22    <li>Premier élément de liste</li>
23    <li>Deuxième élément de liste</li>
24    <li>Troisième élément de liste</li>
25  </ul>
26</body>
27</html>

Étape 2 : Créer un fichier CSS

Ouvre ou crée un nouveau fichier CSS et enregistre-le sous le nom styles.css.

Étape 3 : Sélecteur universel

Ajoute un style pour le sélecteur universel * afin de changer la couleur du texte en rouge.

1/* Sélecteur universel */
2* {
3  color: red;
4}

Étape 4 : Sélecteur d'ID

Ajoute un style pour l'élément ayant l'identifiant #parent afin de changer la couleur de fond.

1/* Sélecteur d'ID */
2#parent {
3  background-color: lightgray;
4  padding: 10px;
5}

Étape 5 : Sélecteur de frère adjacent

Ajoute un style pour le paragraphe (<p>) qui apparaît directement après le titre <h2> afin de changer la taille de la police.

1/* Sélecteur de frère adjacent */
2h2 + p {
3  font-size: 18px;
4}

Étape 6 : Sélecteur d'enfant

Ajoute un style pour les enfants directs de l'élément <div> afin de changer la couleur du texte.

1/* Sélecteur d'enfant */
2div > p {
3  color: blue;
4}

Étape 7 : Sélecteur de frère général

Ajoute un style pour tous les paragraphes (<p>) qui apparaissent après le titre <h2> au même niveau afin de changer la graisse de la police.

1/* Sélecteur de frère général */
2h2 ~ p {
3  font-weight: bold;
4}

Étape 8 : Sélecteur d'attribut

Ajoute un style pour les liens (<a>) ayant un attribut href spécifique afin de changer leur couleur.

1/* Sélecteur d'attribut */
2a[href*="google"] {
3  color: green;
4}

Résultat

Une fois toutes les étapes terminées, tes fichiers HTML et CSS devraient ressembler à ceci :

Fichier HTML (index.html)

Toute la page de l'étape 1, sans changement :

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Lier le fichier CSS -->
7  <title>Sélecteurs CSS avancés</title>
8</head>
9<body>
10  <h2>Titre 2</h2>
11  <p>Paragraphe après le titre 2</p>
12  <div id="parent">
13    <p>Enfant direct du div</p>
14    <span>Span à l'intérieur du div</span>
15  </div>
16  <h2>Titre 2</h2>
17  <p>Paragraphe après un autre titre 2</p>
18  <a href="https://example.com">Lien vers Example</a>
19  <a href="https://google.com">Lien vers Google</a>
20  <a href="https://example.com">Un autre lien vers Example</a>
21  <ul>
22    <li>Premier élément de liste</li>
23    <li>Deuxième élément de liste</li>
24    <li>Troisième élément de liste</li>
25  </ul>
26</body>
27</html>

Fichier CSS (styles.css)

Toutes les règles des étapes 3 à 8 dans un seul fichier :

1/* Sélecteur universel */
2* {
3  color: red;
4}
5
6/* Sélecteur d'ID */
7#parent {
8  background-color: lightgray;
9  padding: 10px;
10}
11
12/* Sélecteur de frère adjacent */
13h2 + p {
14  font-size: 18px;
15}
16
17/* Sélecteur d'enfant */
18div > p {
19  color: blue;
20}
21
22/* Sélecteur de frère général */
23h2 ~ p {
24  font-weight: bold;
25}
26
27/* Sélecteur d'attribut */
28a[href*="google"] {
29  color: green;
30}

Pour aller plus loin

1. Ajoute davantage d'éléments avec différents sélecteurs pour mieux comprendre comment fonctionnent les différents sélecteurs.
2. Essaie d'ajouter davantage de styles à ta page, par exemple en changeant les couleurs, les tailles et d'autres propriétés CSS.
3. Teste tes compétences en créant des mises en page plus complexes à l'aide de différents sélecteurs.

Après avoir terminé cet exercice, tu devrais mieux comprendre comment utiliser différents sélecteurs avancés en CSS pour styliser précisément les éléments d'une page.

Comme dirait Mohamed : « Les sélecteurs CSS sont comme des hiéroglyphes précis - plus tu désignes un élément avec exactitude, mieux tu le contrôles. Chaque scribe doit connaître tous les symboles ! »

Teste les sélecteurs avancés dans l'éditeur ci-dessous :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="style.css">
7  <title>Sélecteurs CSS avancés</title>
8</head>
9<body>
10  <h2>Titre 2</h2>
11  <p>Paragraphe après le titre 2</p>
12  <div id="parent">
13    <p>Enfant direct du div</p>
14    <span>Span à l'intérieur du div</span>
15  </div>
16  <h2>Titre 2</h2>
17  <p>Paragraphe après un autre titre 2</p>
18  <a href="https://example.com">Lien vers Example</a>
19  <a href="https://google.com">Lien vers Google</a>
20  <a href="https://example.com">Autre lien vers Example</a>
21  <ul>
22    <li>Premier élément de la liste</li>
23    <li>Deuxième élément de la liste</li>
24    <li>Troisième élément de la liste</li>
25  </ul>
26</body>
27</html>