Les combinateurs CSS

Les combinateurs CSS

  1. Objectifs

    • Connaitre les combinateurs en CSS
  2. Présentation

  3. Sélecteurs Contextuels ou combinateur descendant

    • Les sélecteurs contextuels sont des chaînes de deux sélecteurs simples ou plus, séparés par des espaces.
    • Ces sélecteurs peuvent se voir attribuer des propriétés normales et, en raison des règles d’ordre en cascade, ils auront priorité sur les sélecteurs simples.
    • Le combinateur descendant— en général représenté par un seul espace ( ) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s’ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc…) qui correspond au premier sélecteur.
    • Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.
    • Bientôt remplacé par deux chevrons dans le CSS4.
      • Par exemple, le sélecteur contextuel de P strong { color: blue }
      • Cette règle indique que le texte mis en gras dans un paragraphe doit avoir une couleur bleu.
      • Le texte en gras dans un titre ne serait pas affecté.
    • Exemple

        • Supposons qu’on veuille changer uniquement la couleur des “li” de la deuxième liste. li {color: red;}
          ne marche pas, car elle change la couleur des “li” dans les deux listes.
        • On peut utiliser un sélecteur composé de deux sélecteurs simples: #liste2 li {color: red;}
        • L’espace entre “#liste2” et “li” est très important: il veut dire “descendant de“.
        • Donc: “#liste2 li” veut dire “tous les li qui sont descendants de #liste2

        <ul id="liste1">
            <li>abc</li>
            <li>def</li>
        </ul>
        
        <ul id="liste2">
            <li>xyz</li>
            <li>rst</li>
        </ul>
        

      1. HTML

          
        <div>
          <p>Je suis un paragraphe à l'intérieur d'un élément div </p>
             <div>
               <p>Je suis un autre paragraphe à l'intérieur d'un élément 
                 div qui fait partie lui-même du premier élément div</p>
             </div>
        </div>
        
        CSS

           
        div /*le blanc est ici*/ p{
        background-color: purple;
        color: white;
        }
        /*niveau 4*/
        div>>p{
        ...
        }
        
        Résultat
        Les combinateurs CSS



  4. Les combinateurs enfants(>) en CSS

    • Le combinateur > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.
    • Sépare deux sélecteurs. Ne sélectionne que les enfants directs du premier sélecteur
    • Un combinateur d’enfants décrit une relation d’enfance entre deux éléments. Un combinateur enfant est constitué du “signe supérieur à” (U+003E, >) point de code et sépare deux sélecteurs composés .
    • HTML

      <div>
        <p>Je suis un paragraphe à l'intérieur d'un élément div </p>
         <div>
           <p>Je suis un autre paragraphe à l'intérieur d'un élément 
           div qui fait partie lui-même du premier élément div</p>
         </div>
      </div>
      
      CSS

      div > p{
        background-color: purple;
        color: white;
        }
      /*Seul le premier élément enfant est visé par rapport à son parent*/
      
      Résultat

      Les combinateurs CSS

  5. Les combinateurs frères adjacents ou combinateurs directs (+) en CSS

    • Permet de sélectionner un élément immédiatement précédé par un autre élément.
    • Les sélecteurs de voisin direct sont représentés par le combinateur “+“.
    • Ou sélecteur de frère adjacent (+) est utilisé pour sélectionner quelque chose s’il est juste à côté d’un autre élément au même niveau de la hiérarchie.
    • HTML

      <div>
        <p>Je suis un paragraphe à l'intérieur d'un élément div </p>
         <div>
           <p>Je suis un autre paragraphe à l'intérieur d'un élément 
           div qui fait partie lui-même du premier élément div</p>
         </div>
      </div>
      
      CSS

      p+p {
      background-color: purple;
      color: white;
      }
      /*ici on permet de viser l'élément enfant qui suit le premier élément
      enfant à condition que les deux élément possèdent le même élément
      parent*/
      
      Résultat

      Les combinateurs CSS

  6. Le combinateur voisin général (~) en CSS

    • Même fonction que le voisin direct mais sélectionne tous les éléments frères.
    • HTML

      <div>
        <p>Je suis un paragraphe à l'intérieur d'un élément div </p>
         <div>
           <p>Je suis un autre paragraphe à l'intérieur d'un élément 
           div qui fait partie lui-même du premier élément div</p>
         </div>
      </div>
      
      CSS

      h1~p {
      background-color: purple;
      color: white;
      }
      
      Résultat

      Les combinateurs CSS

  7. Tableau récapitulatif des différents combinateurs en CSS

    • On compte 4 combinateurs de sélecteurs. Résumons-les dans un tableau, ça sera plus parlant. A et B sont des sélecteurs simples.
    • NOM SYNTAXE SELECTION
      Combinateur descendant A B Ce combinateur, matérialisé par un simple espace, cible un élément B contenu dans un élément A, quelque soit son degré de parenté : un enfant ou un enfant d’enfant.
      Combinateur enfant A > B Contrairement au précédent, ce combinateur, matérialisé par un supérieur, cible un élément B qui est l’enfant direct d’un élément A.
      Combinateur adjacent A + B Ce combinateur, matérialisé par un plus, cible un élément B immédiatement précédé par un élément A. Le mot adjacent est important : seul le premier élément après l’élément A sera ciblé.
      Combinateur général sibling A ~ B Ce combinateur cible un élément B précédé par un élément A. Contrairement au combinateur adjacent où seul le premier frère est ciblé, ici, tous les frères sont concernés.
  8. Applications les combinateurs en CSS

    • Exercice 01
    • Exercice 02
      • En se basant sur le code html suivant:
      • Les combinateurs CSS

      • Utiliser les combinateurs et appliquer les styles CSS ci dessous :
        1. Un retrait gauche de 20px pour tous les paragraphes descendants de la classe “article”.
        2. Un background de couleur jaune pour les paragraphes frères directs du titre “h3” (qui se trouvent immédiatement après h3).
        3. Une bordure noir et solide pour les paragraphes frères indirects du titre “h3”. Element1 ~ Element2 { }les styles seront appliqués à tous les element2 frères de Element1, même si un autre frère vient se mêler entre eux.
        4. Une couleur verte pour les paragraphes fils des éléments “li”.



Abonnez vous à notre chaîne YouTube gratuitement