18 Pseudo classes et pseudo éléments

# Pseudoclasses

Une pseudo-catégorie peut être spécialement conçue en CSS, par exemple, lorsque...

• un utilisateur passe la souris sur un élément

• un utilisateur se concentre sur un champ de saisie

La syntaxe des pseudo-classes est...

   selector:pseudo-classe {
     propriété: valeur;
   }

Parfois, vous verrez une pseudo-classe avec deux deux-points ::pseudo-classe. Un ou deux points sont reconnus par le navigateur. Ci-dessus, vous voyez la syntaxe avec un deux-points :pseudo-classe.

# :hover

L'option "survol" est appliquée lorsque l'utilisateur survole un élément.

    <a class="button" href="https://duckduckgo.com">Je suis un bouton</a>

    .button {
      padding: 0.5rem 1rem;
      color: white;
      background-color: royalblue;
      border-radius: 0.5rem;
    }
    
    .button:hover {
      background-color: orange;
    }

:hand: Tester ce code

# :active

:active est appliqué lorsque l'utilisateur maintient le bouton de la souris enfoncé sur l'élément. Cela peut être utilisé, par exemple, pour donner l'impression que quelque chose est "enfoncé" et faire apparaître un bouton de manière haptique.

      <a class="button" href="https://duckduckgo.com">Je suis un bouton</a>.

    .button {
      padding: 0.5rem 1rem;
      color: white;
      background-color: royalblue;
      border-radius: 0.5rem;
    }
    
    .button:active {
      background-color: darkblue;
      box-shadow: inset 0 -2px 4px black;
    }

⚒️Tester ce code

# :focus

Le terme "focus" s'applique lorsqu'un élément est en focus. La plupart du temps, vous le savez grâce aux champs de saisie, où vous pouvez utiliser la "BTA" pour passer au champ de saisie suivant, et ainsi le "cibler".

    <input class="inputfield" type="text" value="focus me" />

    .inputfield:focus {
    border: 4px solid tomato;
    color: royalblue;
}

⚒️ Tester ce code

:first-child

:first-child est appliqué lorsqu'un élément est le premier enfant et permet de le styliser différemment. Dans l'exemple suivant, li est le premier enfant de ul et obtient donc son propre style.

    <ul class="list">
      <li>place 1</li>
      <li>place 2</li>
      <li>Place 3</li>
    </ul>

    li:first-child {
      color: tomato;
      font-weight: bold;
    }

⚒️ Tester ce code

:last-child

L'expression :last-child s'applique lorsqu'un élément est le dernier enfant et permet de lui donner un style différent. Dans l'exemple suivant, le troisième "li" est le dernier enfant de "ul" et a donc son propre style.

    <ul>
      <li>place 1</li>
      <li>place 2</li>
      <li>Place 3</li>
    </ul>

    li:last-child {
      color: tomato;
      font-weight: bold;
    }

⚒️ Tester ce code

:nth-child()

Le fonctionnement de :nth-child() est similaire à celui de :first-child et :last-child. La différence est qu'il permet également de ne sélectionner que le deuxième enfant, voire des règles complexes comme "styliser le premier et un enfant sur deux".

    <ul>
      <li>place 1</li>
      <li>Place 2</li>
      <li>Place 3</li>
      <li>Place 4</li>
      <li>Place 5</li>
    </ul>

    li:nth-child(2) {
      color: tomato;
      font-weight: bold;
    }
    
    li:nth-child(3) {
      color: orange;
      font-weight: bold;
    }

⚒️ Tester ce code

Pour faciliter la lecture des listes, il est parfois pratique de mettre en évidence chaque élément impair.

li:nth-child(odd) { /* odd = impaire, even = pair */
background-color: whitesmoke;
}

⚒️Tester ce code

🔗 Liens connexes

• nième enfant testeur
• documentation sur les pseudo-classes (w3schools.com)

# Pseudoéléments

Les pseudo-éléments peuvent être utilisés pour créer des éléments personnalisés avant et après un élément via le CSS. Vous verrez dans un instant pourquoi cela est utile.

Les différents pays ont des guillemets différents. En Allemagne, les guillemets "texte" sont courants, tandis qu'en Suisse, on utilise "texte".

    <blockquote class="schweiz">
      Le canton de vaud est grand
    </blockquote>
    
    <blockquote class="german">
        Wer zuerst kommt, mahlt zuerst.
    </blockquote>

.schweiz:before {
content: "«"; /* L'attribut content doit toujours être présent, sinon :before ou :after ne sera pas reconnu */
color: tomato;
}

.schweiz:after {
content: "»";
color: tomato;
}

.deutschland:before {
content: "„";
color: tomato;
}

.deutschland:after {
content: "“";
color: tomato;
}

⚒️Tester ce code

Autres 🔗 Liens

• Documentation sur les pseudo-éléments (w3schools.com)