Premiers pas avec les pseudo-classes et les pseudo-éléments CSS
Vous pouvez utiliser des sélecteurs CSS pour cibler et styliser des éléments dans une page Web. Un sélecteur standard peut cibler un paragraphe spécifique ou tous les titres à un certain niveau. Les pseudo-sélecteurs vont encore plus loin, vous permettant de cibler des parties de la page avec plus de nuance.
Les pseudo-classes ciblent différents états d'un élément : lorsque le pointeur survole un lien, par exemple. Les pseudo-éléments vous permettent de cibler une partie spécifique d'un élément, comme la première ligne d'un paragraphe.
Alors, sans plus tarder, expliquons les bases des pseudo-classes et des pseudo-éléments.
Qu'est-ce qu'une pseudo-classe ?
Une pseudo-classe est un sélecteur CSS qui sélectionne des éléments HTML dans un état spécifique. Certains états font référence au contexte, comme le premier élément de son type. D'autres sont comportementales, comme lorsqu'un lien est survolé par le pointeur de la souris. Ils vous permettent de styliser le contenu en fonction des actions d'un utilisateur. Les états contextuels, en particulier, vous aident à écrire un code flexible, maintenable et propre. Les états comportementaux offrent un raccourci pour les fonctionnalités pour lesquelles vous pourriez autrement devoir utiliser JavaScript.
Vous pouvez facilement reconnaître les pseudo-classes car elles commencent par deux points ( : ). Voyons quelques exemples de pseudo-classes simples et d'action utilisateur.
Exemple simple de pseudo-classe
Tout d'abord, écrivons du code HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</header>
<section>
<p>
Voluptatum fuga, impedit sequi totam numquam assumenda repellat
tempora sapiente! Nihil unde vel recusandae, expedita aperiam tempora
totam deserunt non porro reprehenderit.
</p>
<p>
Dicta totam non iusto labore sapiente numquam hic tempora earum,
minima repellendus pariatur fugit nobis ex adipisci, tempore vitae
laboriosam harum. Quidem!
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Asperiores illum beatae dolores, dolore quae exercitationem laudantium,
officia nam distinctio tempora deleniti itaque quibusdam iste quo eaque
reiciendis nostrum saepe aperiam?
</p>
</section>
</body>
</html>
Notez qu'il y a plusieurs paragraphes dans la même section. Pour les styliser individuellement, vous pouvez attribuer une classe distincte à chacun et utiliser un sélecteur de classe CSS. Mais ce n'est pas très pratique, surtout si le contenu peut changer fréquemment. Au lieu de cela, vous pouvez utiliser des pseudo-classes qui n'existent pas dans le code HTML mais qui vous permettent tout de même de cibler et de styliser les éléments. Voyons voir comment ça fonctionne:
CSS
body {
font-size: 1em;
}
header {
font-size: 3em;
}
/* Selecting the first paragraph */
p:first-child {
font-size: 1.3em;
}
/* Selecting the last paragraph */
p:last-child {
color: red;
text-decoration: underline;
}
/* Selecting the nth paragraph */
p:nth-child(3) {
color: blue;
font-style: italic;
}
p:nth-child(4) {
color: #666;
font-size: 1.9em;
}
p:nth-child(5) {
color: yellowgreen;
font-weight: bold;
}Sortir:
En utilisant des pseudo-classes simples comme :first-child , :nth-child(x) , et, :last-child , nous pouvons facilement sélectionner et styliser les paragraphes. Notez que ces pseudo-classes sélectionnent les paragraphes eux-mêmes, pas leurs éléments enfants.
Exemple de pseudo-classe d'action utilisateur
Les pseudo-classes d'action utilisateur ou comportementales ne s'appliquent que lorsque l'utilisateur interagit avec le document. L'un des exemples les plus populaires comprend :link , :visited , :hover et :focus states. Voyons l'exemple d'état :hover pour un lien et une image.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<div class="image-box">
<img class="image-back" src="images/By_Unsplash_Search.jpg" alt="Coding on a laptop" />
<img class="img-front" src="images/By_Unsplash.jpg" alt="Search bar with blue background" />
</div>
<div>
<a href="#">Learn more about Pseudo-classes</a>
</div>
</body>
</html>
Dans cet exemple, il y a deux images et un lien. Les images sont positionnées au même endroit, vous pouvez donc les changer en masquant l'une et en montrant l'autre.
CSS
body {
font-family: 'Inter', sans-serif;
}
.image-box {
position: relative;
width: 70%;
margin: 5em;
color: #fff;
}
.image-box img {
display: inline-block;
position: absolute;
left: 0;
width: 70%;
}
.image-box img.img-front:hover{
opacity:0;
cursor: pointer;
}
a {
position: absolute;
bottom: 2em;
left: 3em;
text-decoration: none;
color: #222;
display: inline-block;
font-size: 2.5em;
font-weight: 600;
border-bottom: 5px solid rgb(250, 0, 0);
}
a:hover {
color: rgb(250, 0, 0);
border-bottom: none;
}
Ce premier exemple montre l'effet du survol du lien. Le CSS change de couleur et de bordure :
Dans ce deuxième exemple, vous pouvez voir l'effet du survol de l'image. Son opacité est définie sur 0, ce qui rend effectivement l'image transparente.
Qu'est-ce qu'un pseudo-élément ?
Un pseudo-élément se comporte de la même manière qu'une pseudo-classe. N'oubliez pas qu'une pseudo-classe s'applique à un élément existant. Un pseudo-élément, quant à lui, agit comme si un nouvel élément HTML existait. De plus, un pseudo-élément commence par un double deux-points ( :: ). Voyons comment cela fonctionne avec un exemple.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>
<div class="header-img">
<img src="By_Unsplash.jpg" alt="Coding on a laptop" />
</div>
</header>
</body>
</html>
Maintenant, nous allons utiliser un pseudo-élément ::before pour ajouter le texte En savoir plus et un pseudo-élément ::after pour ajouter le texte Acheter maintenant, en utilisant uniquement du CSS. Nous appliquerons également la propriété position pour placer ces pseudo-éléments par rapport au conteneur parent.
body {
font-family: 'Inter', sans-serif;
color: #666;
}
img {
width: 30em;
vertical-align: middle;
}
.header-img::before {
content: "Learn More";
color: #fff;
background-color: rgb(75, 159, 192);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
top: 25px;
left: -70px;
transform: rotate(-45deg);
}
.header-img::after {
content: "Buy Now";
color: #fff;
background-color: rgb(212, 115, 91);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
bottom: 25px;
right: -70px;
transform: rotate(-45deg);
}
header {
position: relative;
overflow: hidden;
font-weight: 600;
}
header,
section {
width: 30em;
}
L'effet final superpose des étiquettes de type "ruban" en haut à gauche et en bas à droite de l'image :
Mettez la main sur les pseudo-classes et les pseudo-éléments
Les pseudo-classes et pseudo-éléments CSS, lorsqu'ils sont utilisés correctement, ouvrent la porte à de nombreuses possibilités. Vous pouvez vous sentir dépassé au début, mais la pratique de cette technique est essentielle pour améliorer vos compétences en conception de sites Web. La clé est de toujours tester vos conceptions de manière approfondie, en utilisant des fonctionnalités telles que les DevTools de Google Chrome.
Nous espérons que vous avez appris les bases des pseudo-classes et des pseudo-éléments. N'oubliez pas que l'apprentissage ne s'arrête jamais ! Alors, continuez à explorer de nouveaux sélecteurs CSS et essayez de les implémenter et de les tester dans votre prochain projet.