Aller au contenu principal


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