Sélecteur

Un sélecteur sert à désigner les éléments HTML auxquels une règle CSS va s’appliquer.

En d’autres termes, c’est grâce au sélecteur que le navigateur sait quels éléments de la page doivent être stylisés avec les propriétés définies.

Il existe différents types de sélecteur :

  • Les principaux

  • Les combinés

  • Les avancés

DéfinitionLes principaux types de sélecteurs

Sélecteurs par balise

Ciblent tous les éléments d’un certain type en fonction de leur nom de balise.

1
h1 {font-size: 2em;}

Tous les titres <h1> sont modifiés.

Sélecteurs par classe

Ciblent les éléments qui possèdent une classe (attribut class).

1
<p class="important">Texte important</p>
1
.important {color: red;}

Tous les éléments avec class="important" seront rouges.

Sélecteurs par identifiant (id)

Ciblent un élément unique (attribut id).

1
<p id="intro">Bienvenue !</p>
1
#intro {font-style: italic;}

L’élément avec id="intro" est en italique.

Attention : un id doit être unique dans la page.

Sélecteurs universels

Ciblent tous les éléments.

1
* {margin: 0;}

Réinitialise les marges de tous les éléments.

DéfinitionLes sélecteurs combinés

Sélecteur descendant

On note la descendance entre deux éléments grâce à un espace.

1
article p {
2
  color: green;
3
}

Tous les <p> à l’intérieur d’un <article>.

Sélecteur enfant direct

Le symbole > permet de cibler uniquement les enfants directs d’un élément.

1
ul > li {
2
  list-style: square;
3
}

Les <li> directement dans un <ul>, mais pas les sous-listes.

Sélecteur frères généraux

Le symbole ~ permet de cibler tous les éléments frères situés après un élément donné.

1
h1 ~ p {
2
  color: gray;
3
}

Tous les <p> qui suivent un <h1>.

Sélecteurs frères adjacents

Le symbole + permet de cibler uniquement l’élément frère qui suit immédiatement.

1
h1 + p {
2
  color: gray;
3
}

Le premier <p> qui suit immédiatement un <h1>.

Sélecteurs de groupe

1
h1, h2, h3 {
2
  font-family: Arial, sans-serif;
3
}

Applique le même style aux <h1>, <h2> et <h3>.

DéfinitionLes sélecteurs avancés

Sélecteurs d’attribut

Les crochets [] permettent de cibler les balises en fonction de leurs attributs et valeurs.

1
a[target="_blank"] {
2
  color: orange;
3
}

Cible les liens qui ouvrent une nouvelle fenêtre.

voir : Syntaxe et signification[1]

Pseudo-classes

Pour cibler un état ou une position d’un élément.

1
a:hover {
2
  text-decoration: underline;
3
}
4
li:first-child {
5
  font-weight: bold;
6
}

voir : liste des pseudos classes[2]

Pseudo-éléments

Pour cibler une partie d’un élément.

1
p::first-line {
2
  font-size: 1.2em;
3
}
4
p::before {
5
  content: "→ ";
6
}

voir : liste des pseudos éléments[3]

Conseil

Vous pouvez trouver plus d'informations sur les sélecteurs à l'adresse suivante : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_selectors