HTML / CSS

Sélecteurs & arborescence en CSS

Objectif : savoir cibler précisément un élément HTML grâce à sa balise, ses classes/ID, sa position dans le DOM (arborescence), ses relations (combinateurs) et ses attributs.

1) Notion d’arborescence (DOM)

Comprendre parent / enfant / descendant

En HTML, les éléments sont organisés comme un arbre. Un élément peut contenir d’autres éléments.

Exemple HTML

<section>
  <article>
    <p>Un <strong>mot</strong> important.</p>
  </article>
</section>

Relations

  • <section> est le parent de <article>
  • <article> est l’enfant de <section>
  • <strong> est un descendant de <section>

Le CSS cible souvent en utilisant cette hiérarchie (ex : section article p).

2) Les sélecteurs (ciblage)

Sélecteur de type (balise)

p — cible toutes les balises <p>.

p {
  color: #222;
}

Sélecteur de classe

.terme — cible tous les éléments ayant class="terme".

.terme {
  font-style: italic;
}

Sélecteur d’identifiant (ID)

#intro — cible l’élément ayant id="intro" (unique dans la page).

#intro {
  border: 1px dashed #c82605;
}

Sélecteur “élément + classe”

span.terme — cible uniquement les <span> qui ont la classe terme.

span.terme {
  color: green;
}

Sélecteur groupé

div#intro, section — applique les mêmes règles à plusieurs cibles.

div#intro,
section {
  padding: 10px;
}

Pseudo-classes (états)

:hover, :focus — styles au survol / au focus (clavier).

a:hover,
a:focus {
  text-decoration: underline;
}

3) Les combinateurs

Un combinateur relie deux sélecteurs pour cibler un élément en fonction de sa relation avec un autre (descendant, enfant direct, frères…).

Descendant (espace)

section article p — cible tous les p qui sont dans article (même profondément).

section article p {
  background: #ffd133;
}

Enfant direct (>)

ul#menu01 > li — cible seulement les li enfants immédiats de ul#menu01.

ul#menu01 > li {
  background: yellow;
}

Frère adjacent (+)

h3 + p — cible le p placé juste après un h3 (même parent).

h3 + p {
  font-weight: bold;
}

Frères suivants (~)

h3 ~ p — cible tous les p frères qui suivent un h3.

h3 ~ p {
  border: 2px dotted blue;
}

Cas pratique : styliser les éléments “après” au survol

li:hover ~ li — quand on survole un li, les li suivants changent.

ul#menu02 li:hover ~ li {
  background: green;
}

Bonus (récent) : :has() “parent conditionnel”

ul:has(li:hover) — cible le parent ul si un descendant (ici un li) est survolé.
À réserver si vous l’avez vu / autorisé (support navigateur à vérifier). 

/* Parent UL si un LI est survolé */
ul:has(li:hover) {
  outline: 2px solid #c82605;
}

/* LI qui contient un lien .pageactive */
ul#menu03 li:has(a.pageactive) {
  background: #ffb3b3;
}

4) Les sélecteurs d’attributs

Les sélecteurs d’attributs permettent de cibler un élément selon la présence ou la valeur d’un attribut HTML (ex : href, title, type…).

Présence d’un attribut

abbr[title] — cible les abbr qui ont un attribut title.

abbr[title] {
  border-bottom: 2px dotted #c82605;
}

Valeur exacte

input[type="text"] — cible les champs texte uniquement.

input[type="text"] {
  border: 1px solid green;
}

Combiner plusieurs attributs

input[type="text"][name="nom"] — cible un champ texte précis (attention : pas d’espace).

input[type="text"][name="nom"] {
  text-transform: uppercase;
}

Commence par (^=)

a[href^="http"] — cible les liens externes (http/https).

a[href^="http"],
a[href^="https"] {
  border: 1px solid red;
}

Se termine par ($=)

a[href$=".pdf"] — cible les liens vers fichiers PDF.

a[href$=".pdf"] {
  padding-right: 20px;
}

Contient (*=)

a[href*="google"] — cible si l’attribut contient une chaîne donnée (pratique mais plus large).

a[href*="google"] {
  background: #fff3cd;
}

Mini démo (HTML) pour tester rapidement

<p>Une abréviation : <abbr title="Cascading Style Sheets">CSS</abbr></p>

<ul>
  <li><a href="https://example.com">Lien externe</a></li>
  <li><a href="doc.pdf">Fichier PDF</a></li>
</ul>

<form>
  Nom : <input type="text" name="nom">
  Sexe : <input type="radio" name="sexe">
</form>