CSS : Les pseudo-classes

Nouveau tutoriel CSS. Après un petit moment d’absence en cette catégorie, elle revient en force avec un nouveau tutoriel et de nouvelles explications à propos des pseudos-classes.

Qu’est-ce qu’une pseudo-class ?

Une pseudo class est un élément du code CSS. Cet élément permet de cibler des éléments précis dans un code HTML, sans pour autant casser toute l’armature du code déjà établi auparavant. Par exemple, quand on réutilise le code d’une page HTML/CSS pour une autre page, pas besoin d’avoir plusieurs codes CSS.

Comment ça fonctionne ?

Commencez par faire votre code HTML avec vos div, vos ul etc… Et appliquez les styles voulus. Ensuite, si vous voulez, par exemple, appliquer un style sur un div portant une class identique à celle d’un autre div, vous devrez utiliser une pseudo class. Mais comment ? Simplement par un code normal. Cependant vous devez respecter une certaine logique : il faut partir du parent. Je m’explique. Si vous voulez cibler le paragraphe dans l'élément de la liste dans la liste dans le div, vous devez rédiger ce code au préalable.

<!doctype html>
<html>
 <head>
  <title>Les pseudo classes</title>
  <meta charset="utf-8">
  <link  href="css/main.css" rel="stylesheet"/>
 </head>
<body>
  <div id="container">
      <ul>
        <li>
         <p id="test">Je suis le texte du test</p>
        </li>
      </ul>
  </div>
</body>
</html>

Ici, si dans votre code vous avez déjà des <p> avec un style spécifique, vous pouvez cibler ce <p> précisément et changer son style.

div ul li p{
  font-size : 20px;
  text-decoration : underline;
}

Un autre petit détail à savoir, vous pouvez effectuer un ciblage plus précis encore, soit en remontant à l'élément le plus haut possible, soit en précisant les id ou classes que comportent ces éléments, comme le montre ce code.

div#container ul li p#test{
  font-size : 20px;
  text-decoration : underline;
}

 

Avantages

Utiliser cet outil de css permet une très grande personnalisation de vos codes et de vos styles. Vous pouvez aussi, par la biais du code suivant, cibler uniquement le premier élément d’un ensemble d’éléments, comme la première lettre de chaque paragraphe (p :first-child), ou bien tous les éléments pairs d’un autre ensemble.

Est-ce clair ? Posez vos questions si vous en avez, j’y répondrais aussi vite que possible.

Laisser un commentaire