Aller au contenu principal


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...

Billet créé le :
18 nov 2020

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