Arborescence

1
<article>
2
  <h1>
3
    Ma recette
4
  </h1>
5
  <p>
6
    Voici un lien vers cette <a href="...">recette</a>
7
  </p>
8
  <img src="..." alt="..." />
9
</article>

Comme pour un arbre généalogique, le HTML génère une arborescence. Chaque élément étant le parent et l'enfant d'autres éléments. La balise <html> est quant à elle, l'origine de l'arbre.

Filiation :

  • Enfant : h1, p et img sont des enfants de article. a est un enfant de p

  • Parent : article est un parent de h1, p et img. p est un parent de a

  • Ancêtre : article est un ancêtre de h1, p, img et a

  • Descendant : h1, p, img et a sont des descendants de article

  • Frère : h1 et p sont des frères de img

DéfinitionHéritage

Chaque balise hérite des css de son parent.

1
article {
2
  color: green;
3
}
4
p {
5
  color: black;
6
}
1
<article>
2
  <div>
3
    Ecriture verte
4
  </div>
5
  <p>
6
    Ecriture noire
7
  </p>
8
</article>
Ecriture verte

Ecriture noire

Interprétation de CSS

Toutes les balises qui descendent de article ont une écriture verte. Sauf si une autre règle vient modifier la couleur.

DéfinitionBalises Descendantes

Pour sélectionner les balises descendantes d'une autre balise, on les fait suivre dans le sens parent descendant.

1
article p

Toutes les descendantes <p> de balises <article>

DéfinitionBalises Enfants

Pour ne sélectionner que les enfants, on ajoute le symbole >.

1
article > p

Toutes les balises enfants <p> de balises <article>

DéfinitionBalises suivantes

Pour sélectionner les balises suivantes, on ajoute le symbole ~.

1
h1 ~ p

Toutes les balises <p> qui suivent une balise <h1>

DéfinitionBalises immédiatement suivantes

Pour sélectionner les balises immédiatement suivantes, on ajoute le symbole +.

1
h1 + p

Toutes les balises <p> qui suivent immédiatement une balise <h1>

DéfinitionCombinaison

1
article p a

Les balises descendantes <a> des balises <p> qui sont descendantes de <article>

1
article > p > a

Les balises <a> enfants des balises <p> qui sont enfants de <article>

1
article > * > a

Les balises petits-enfants <a> de <article>

DéfinitionGrouper

Quand plusieurs sélecteurs sont concernés par le même bloc de déclaration, on peut les regrouper grâce à la virgule.

1
p, h1, h2, h3 {
2
  color: gray;
3
}

Les balises <p>, <h1>, <h2> et <h3> auront une écriture grise.