CSS - La hiérarchie
Ce billet décrit l'organisation d'une feuille style. Cette organisation peut se complexifier terriblement selon les opérateurs qui sont utilisés.
Dans la suite de cette note : B doit être vu comme le sélecteur d'une balise HTML quelconque par exemple body ou div ou p ou ul ou li...
1. La syntaxe de base.
Pour styliser le contenu situé entre la balise ouvrante (<B>) et la balise fermante (</B>) d'un élément HTML, il faut utiliser cette syntaxe :
B {
déclaration CSS;
.... ;
déclaration CSS;
}
Cette suite de déclarations (propriété : valeur;) réalise le style qui s'appliquera sur tout le code HTML situé à l'intérieur de la balise B donc de <B> à </B>
Dans la suite du billet, j'utiliserai la notation raccourcie ci-dessous :
B {
suite d'instructions
}
exemple :
p {
color: blue;
decoration: underline;
}
Ce style colore en bleu et souligne le texte de tous les paragraphes.
exemple 2 :
.laClasse {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de toute balise classée laClasse donc entre <B class="laClasse"> et </B>. Une même classe peut être appliquée à plusieurs balises.
exemple 3 :
#identifiant {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de l'unique balise nommée identifiant donc entre <B id="identifiant"> et </B>. Un identifiant ne doit repérer qu'une seule balise.
exemple 4 :
B:event {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de toute balise B lorsque l'action utilisateur "event" est détectée sur la balise B. "event" peut prendre les valeurs "hover", "active", "focus", "focus-within", "visited".
2. Des raccourcis :
B {
suite d'instructions
}
B1 {
suite d'instructions
}
peut être remplacée par
B, B1 {
suite d'instructions
}
à la condition expresse que exactement les mêmes instructions figurent dans suite d'instructions
B {
suite d'instructions
}
.laClasse {
suite d'instructions
}
#identifiant {
suite d'instructions
}
peut être remplacée par
B, .laClasse, #identifiant {
suite A d'instructions
}
exemple :
ul {
background-color: white;
}
li{
background-color: white;
}
.laClasse{
background-color: white;
}
peut être remplacé par
ul,
li,
.laclasse {
background-color: white;
}
3. Des descendants
note : dans la suite, B1, .... Bi sont des balises HTML quelconques.
3.1 n'importe lequel
exemple 1 :
B B1 {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de toutes balises B1 dès lors qu'elles sont quelque part entre <B> et </B>
On dit que B1 est descendant de B
<B>
<B2>
<B1>
ici le code est stylisé (on est à l'intérieur de B même si c'est de manière indirecte)
</B1>
</B2>
<B1>
ici le code est stylisé (on est à l'intérieur de B)
</B1>
</B>
<B1>
ici le code n'est pas stylisé (on n'est pas l'intérieur de B)
</B1>
exemple 2 :
#menu B2 B3 {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de toutes balises B3 dès lors qu'elles sont quelque part entre <B2> et </B2>, elles-même quelque part entre <B id="menu"> et </B>
<B3>
ici le code n'est pas stylisé (on n'est pas l'intérieur de B2)
</B3>
<B3>
<B2>
ici le code n'est pas stylisé (on est B3 B2 et non B2 B3 - la lecture ne se fait pas remontant)
</B2>
</B3>
<B1>
<B id="menu">
<B2>
<B>
ici le code n'est pas stylisé ( #menu B2 B et non #menu B2 B3 )
</B>
<B3>
ici le code est stylisé. B3 est entre <B2> et </B2>, elle même entre <B id="menu"> et </B>
</B3>
</B2>
</B>
</B1>
3.2 Le descendant direct : fils (fille !)
exemple 1 :
B > B1 {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de toutes balises B1 dès lors qu'elles sont directement entre <B> et </B> (pas de B intermédiaire).
<B>
<B2>
<B1>
ici code non stylisé (balise b2 en intermédiaire B B2 B1)
</B1>
</B2>
<B1>
ici code stylisé (B B1)
</B1>
</B>
<B1>
ici le code n'est pas stylisé (pas de père B)
</B1>
exemple 2 :
#menu B2 > B3 {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de toutes balises B3 dès lors qu'elles sont directement entre <B2> et </B2> (pas de B intermédiaire) à condition d'être quelque part entre <B id="menu"> et </B>
<B3>
ici le code n'est pas stylisé (pas de père B2)
</B3>
<B3>
<B2>
ici le code n'est pas stylisé (ce n'est pas la balise B3)
</B2>
</B3>
<B1>
<B id="menu">
<B2>
<B>
ici le code n'est pas stylisé (ce n'est pas la balise B3)
</B>
<B3>
ici le code est stylisé (#menu B2 B3 et pas d'intermédiaire entre B2 et B3)
</B3>
<B1>
<B2>
<B3>
ici le code est stylisé (#menu B2 B1 B2 B3 : pas d'intermédiaire entre B2 et B3)
</B3>
</B2>
<B3>
ici le code n'est pas stylisé (#menu B2 B1 B3 mais un intermédiaire entre B2 et B3)
</B3>
</B1>
</B2>
</B>
</B1>
3.2 L'adjacent
exemple1 :
B + B1 {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de la balise B1 qui suit directement </B>
On parle du jumeau adjacent.
<B>
<B2>
<B1>
ici code non stylisé (B1 ne suit pas </B>)
</B1>
</B2>
<B1>
ici code non stylisé (B1 ne suit pas </B>)
</B1>
</B>
<B1>
ici le code est stylisé (B1 suit </B>)
</B1>
exemple2 :
#menu B2 + B3 {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de la balise B3 qui suit directement </B2> à condition d'être quelque part entre <B id="menu"> et </B>
<B3>
ici le code n'est pas stylisé (B3 ne suit pas </B2>)
</B3>
<B3>
<B2>
ici le code n'est pas stylisé (ce n'est pas la balise B3)
</B2>
</B3>
<B1>
<B id="menu">
<B2>
<B>
ici le code n'est pas stylisé (ce n'est pas la balise B3)
</B>
<B3>
ici le code n'est pas stylisé (B3 ne suit pas </B2>)
</B3>
<B1>
<B2>
<B3>
ici le code n'est pas stylisé (B3 ne suit pas </B2>)
</B3>
</B2>
<B3>
ici le code est stylisé (B3 suit </B2> et est quelque part dans #menu)
</B3>
<B>
ici le code n'est pas stylisé (ce n'est pas la balise B3)
</B>
<B3>
ici le code n'est pas stylisé (B3 ne suit pas </B2>)
</B3>
</B1>
</B2>
</B>
</B1>
3.3 Tous les adjacents
exemple 1 :
B ~ B1 {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de la balise B1 quelque part à la suite de </B> en restant au même niveau de la hiérarchie.
On dit aussi " tous les jumeaux"
<B>
<B2>
<B1>
ici code non stylisé (B1 ne suit pas </B>)
</B1>
</B2>
<B1>
ici code non stylisé (B1 ne suit pas </B>)
</B1>
</B>
<B1>
ici le code est stylisé (B1 suit </B>)
</B1>
exemple2:
#menu B2 + B3 {
suite d'instructions
}
Ce style s'applique sur tout le code HTML situé à l'intérieur de la balise B3 quelque part à la suite de </B2> en restant au même niveau de la hiérarchie et à condition d'être quelque part entre <B id="menu"> et </B>
<B3>
ici le code n'est pas stylisé (B3 ne suit pas </B2>)
</B3>
<B3>
<B2>
ici le code n'est pas stylisé (B3 ne suit pas </B2>)
</B2>
</B3>
<B1>
<B id="menu">
<B2>
<B>
ici le code n'est pas stylisé (B n'est pas concerné)
</B>
<B3>
ici le code n'est pas stylisé (B3 ne suit pas </B2>)
</B3>
<B1>
<B2>
<B3>
ici le code n'est pas stylisé (B3 ne suit pas </B2>)
</B3>
</B2>
<B3>
ici le code est stylisé (B3 suit </B2> et est à l'intérieur de #menu)
</B3>
<B>
ici le code n'est pas stylisé (B n'est pas concerné)
</B>
<B3>
ici le code est stylisé (B3 suit (de facon indirecte) </B2> et est à l'intérieur de #menu)
</B3>
</B1>
</B2>
</B>
</B1>
La syntaxe des sélecteurs :
- .nomClasse {} pour définir le style d'une classe.
- #nomIdendifiant {} pour définir le style d'un identifiant.
Les combinateurs pour exprimer la descendance :
- l'espace : tous les descendants
- > : celui qui suit directement (fils - fille)
- + : le jumeau adjacent
- ~ : tous les jumeaux