COURS COMPLET : LES SÉLECTEURS CSS (de A à Z)

Les sélecteurs CSS permettent de cibler des éléments HTML pour leur appliquer un style.
Il existe plusieurs catégories :

1. Sélecteurs simples

2. Sélecteurs combinés / relationnels

3. Sélecteurs d’attributs

4. Pseudo-classes

5. Pseudo-éléments

6. Sélecteurs avancés (CSS3+)

1️⃣ SÉLECTEURS SIMPLES

✔ 1. Sélecteur de type (tag selector)

Cible tous les éléments d’un type donné.

p {
  color: blue;
}

→ cible tous les <p>.

✔ 2. Sélecteur de classe

Utilise le point .

.box {
  background: red;
}

HTML :

<div class="box"></div>

✔ 3. Sélecteur d’identifiant (ID)

Utilise #
⚠ Un seul élément doit avoir cet ID !

#header {
  height: 80px;
}

✔ 4. Sélecteur universel *

Cible tout dans la page.

* {
  margin: 0;
  padding: 0;
}

✔ 5. Sélecteurs multiples (groupés)

Permet de fusionner plusieurs sélecteurs.

h1, h2, h3 {
  font-family: Arial;
}

2️⃣ SÉLECTEURS COMBINÉS (RELATION ENTRE ÉLÉMENTS)

✔ 1. Descendant : A B

Cible B à l’intérieur de A (n’importe quel niveau).

div p {
  color: green;
}

✔ 2. Enfant direct : A > B

Cible seulement les enfants immédiats.

ul > li {
  color: red;
}

✔ 3. Frère adjacent : A + B

Cible l’élément B juste après A.

h1 + p {
  font-size: 20px;
}

✔ 4. Frères généraux : A ~ B

Cible tous les B après A, même s’ils ne sont pas adjacents.

h2 ~ p {
  color: orange;
}

3️⃣ LES SÉLECTEURS D’ATTRIBUTS

Ils servent à cibler des éléments selon leurs attributs HTML.

✔ 1. Attribut exact : [attr="valeur"]

input[type="password"] {
  background: #eee;
}

✔ 2. Attribut contenant : [attr*="valeur"]

Cible si la valeur contient du texte.

a[href*="facebook"] {
  color: blue;
}

✔ 3. Attribut commençant par : [attr^="valeur"]

a[href^="https"] {
  font-weight: bold;
}

✔ 4. Attribut terminant par : [attr$="valeur"]

img[src$=".png"] {
  border: 2px solid green;
}

✔ 5. Attribut avec mots séparés : [attr~="mot"]

div[class~="active"] {
  border: 1px solid blue;
}

→ utile pour les classes multiples.

✔ 6. Attribut préfixe avec tiret : [attr|="mot"]

p[lang|="en"] {
  color: purple;
}

Cible : lang="en" ou lang="en-US".

4️⃣ PSEUDO-CLASSES

Elles ciblent un état dynamique de l’élément.

🔵 A. Pseudo-classes d’interaction (liens / souris)

✔ :hover

Quand la souris passe dessus.

button:hover {
  background: black;
}

✔ :active

Quand on clique.

a:active {
  color: red;
}

✔ :focus

Quand un input a le focus.

input:focus {
  border-color: blue;
}

✔ :visited

Lien déjà visité.

🔵 B. Pseudo-classes structurelles

✔ :first-child

Le premier enfant.

p:first-child {
  color: green;
}

✔ :last-child

Le dernier enfant.

✔ :nth-child(n)

Très puissant : choisir un élément par son numéro.

Exemples :

Un élément

li:nth-child(3) {
  color: red;
}

Tous les pairs

li:nth-child(even) { color: blue; }

Tous les impairs

li:nth-child(odd) { color: orange; }

Tous les 3 éléments

li:nth-child(3n) {
  font-weight: bold;
}

✔ :nth-of-type(n)

Comme nth-child mais en ignorant les autres types.

p:nth-of-type(2) {
  color: purple;
}

✔ :not(selector)

Inverse la sélection !

button:not(.danger) {
  background: green;
}

🔵 C. Pseudo-classes d’état

✔ :checked

Checkbox ou radio cochée.

input:checked + label {
  font-weight: bold;
}

✔ :disabled

✔ :required

✔ :valid

✔ :invalid

Exemple :

input:invalid {
  border: 2px solid red;
}

5️⃣ PSEUDO-ÉLÉMENTS

Ils ciblent une partie d’un élément (pas un élément entier).

✔ ::before

Ajoute du contenu avant l’élément.

p::before {
  content: "→ ";
  color: red;
}

✔ ::after

Ajoute du contenu après.

p::after {
  content: "...";
}

✔ ::first-letter

Première lettre.

p::first-letter {
  font-size: 40px;
  color: gold;
}

✔ ::first-line

Première ligne de texte.

✔ ::selection

Style du texte sélectionné.

::selection {
  background: yellow;
  color: black;
}

6️⃣ SÉLECTEURS AVANCÉS (CSS3+)

✔ 1. Le sélecteur "has()" (super puissant)

Comme un selecteur parent.

div:has(img) {
  border: 2px solid red;
}

→ cible les div qui contiennent une image.

✔ 2. :is() → simplifie les sélecteurs complexes

:is(h1, h2, h3) {
  color: blue;
}

✔ 3. :where() → comme is() mais sans coût de spécificité

:where(header nav a) {
  text-decoration: none;
}

✔ 4. :root

Cible l’élément <html> → souvent utilisé pour définir des variables CSS.

:root {
  --main-color: #6c63ff;
}

🎁 RÉCAP COMPLET VISUEL

✔ Sélecteurs simples

Type, classe, id, *, groupés

✔ Relationnels

A B, A > B, A + B, A ~ B

✔ Attributs

[attr], =, *=, ^=, $=, ~=, |=

✔ Pseudo-classes

:hover, :focus, :nth-child(), :not(), :checked, ...

✔ Pseudo-éléments

::before, ::after, ::first-letter, ...

✔ Sélecteurs avancés

:has(), :is(), :where(), :root