Dans cette leçon vidéo, l’instructeur explique les pseudo‑classes et les pseudo‑éléments CSS, en montrant comment ils permettent de styliser des états spécifiques d’un élément ou des parties précises d’un élément HTML. Il commence par les pseudo‑classes des liens (a:link, :visited, :hover, :active), montre comment appliquer des couleurs différentes à chaque état, puis propose une approche plus professionnelle consistant à ne styliser que l’état :hover tout en conservant un style global. Il aborde ensuite la pseudo‑classe :focus pour les champs de saisie, ainsi que les pseudo‑classes structurelles :first‑child, :last‑child et :nth‑child pour cibler des articles spécifiques dans une section. La seconde partie porte sur les pseudo‑éléments, en détaillant la syntaxe à un et deux deux‑points, et en illustrant leur usage avec ::first‑line, ::first‑letter, ::before et ::after pour colorer la première ligne, agrandir la première lettre, ou insérer des guillemets avant et après une citation. L’instructeur souligne les différences de syntaxe, les bonnes pratiques et les avantages de ces sélecteurs pour éviter du HTML supplémentaire. La vidéo se conclut par un rappel des concepts et une invitation à la prochaine leçon.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de CSS. Aujourd'hui, nous allons nous intéresser aux pseudo-classes et aux pseudo-éléments. Les pseudo-classes permettent de cibler un état particulier d'un objet, comme pour les liens hypertextes qui peuvent avoir plusieurs états comme l'état survolé ou bien l'état actif. Dans ce cas, on va s'intéresser à l'un de ces états afin de lui donner un style particulier. Les pseudo-éléments quant à eux, ils permettent de cibler une partie de l'élément. Ça veut dire une partie de l'objet HTML comme par exemple la première lettre ou la première ligne. Nous allons maintenant commencer par les pseudo-classes. Alors jetons un coup d'œil sur le code HTML suivant. Nous disposons d'un lien hypertexte, d'une zone de texte, d'une balise section qui contient des balises article et d'une div que j'ai identifiée par citation. On va se concentrer maintenant sur la balise a. Va mettre un style CSS qui permet de formater ce lien. Alors là, on va ajouter la balise a, on va mettre par exemple color green. Quand j'exécute pour voir le résultat, alors là le lien il est souligné. Que je survole ou bien que je clique, le lien reste toujours vert, il ne change pas d'état. C'est là où interviennent les pseudo-classes, c'est-à-dire que chacun des états d'un lien peut avoir un style unique ou bien un style particulier. D'ailleurs, il faut savoir qu'un lien possède 4 états, à savoir l'état visité, l'état non visité, l'état actif et l'état survolé. Alors on va maintenant s'intéresser à ces 4 états. Bon, tout d'abord, pour définir une pseudo-classe, on va mettre le sélecteur qui permet de spécifier l'élément suivi de 2 points, et ensuite on va mettre le nom de la pseudo-classe, par exemple link. Ça veut dire que la couleur verte sera appliquée aux liens en uniquement s'il n'est pas visité, ça veut dire lors de son premier affichage sur le navigateur. On va aussi ajouter d'autres états, par exemple a:hover. Dans ce cas, a:hover, ça veut dire le lien survolé, il suffit de mettre le curseur de la souris dessus pour voir l'effet. Donc color par exemple orange. Ensuite a:active, par exemple color yellow. Et enfin a:active visited, et on va mettre par exemple la couleur blue ou bien red parce que blue c'est déjà une couleur par défaut des liens hypertextes. Donc quand j'exécute, je vais voir que mon lien il est comme ça. Quand je survole, ça change de couleur. Quand je clique et je maintiens le bouton enfoncé, je vais voir une autre couleur. Et quand je quitte, dans ce cas bien sûr après le chargement de la page, il suffit de faire retour en arrière, on va voir que le lien a changé. Donc là c'est l'état visité, donc automatiquement le lien est devenu rouge. On appelle ça des pseudo-classes. Bon, en général, pour styler un lien hypertexte, on n'a pas besoin de mettre tout ça parce qu'on aura beaucoup de couleurs et ça devient de moins en moins professionnel. Alors la meilleure chose à faire, c'est donner un style global au lien hypertexte. Ça veut dire dans tous ses états, il aura un style, mais uniquement dans un état particulier parmi ces 4, il aura un style différent. Et l'état bien sûr que l'on va choisir, c'est hover. C'est-à-dire au moment où je vais survoler le lien hypertexte, celui-ci changera d'allure. Alors voilà ce qu'on va faire. Pour le premier lien, on va mettre que le sélecteur, par exemple color green et text-decoration none, pour dire que par défaut le lien ne sera pas souligné. Et on va conserver juste le hover. On va changer par exemple la couleur, on va ajouter le souligné, on va mettre text-decoration underline. Alors maintenant quand j'exécute, le lien par défaut il est comme ça, il n'est pas souligné, et quand je survole, il est souligné et ça change de couleur. Notez qu'au hover ne s'applique pas uniquement qu'aux liens hypertextes, mais il peut aussi s'appliquer à d'autres objets comme par exemple les divs ou bien tous les éléments HTML qu'on peut intégrer. Maintenant on va s'intéresser à la balise input. Dans ce cas c'est la zone de texte. Cette zone de texte, on va lui appliquer la pseudo-classe focus. Focus, ça veut dire au moment où je vais cliquer dedans pour pouvoir écrire, Alors il va changer d'apparence. Alors là il suffit d'aller sur le CSS, on va cibler notre input par z-text comme ça. Et ensuite on va mettre background-color, on va mettre un gris clair par exemple #ddd. Et z-text-focus, ça veut dire au moment où il sera actif pour écrire dedans, On va mettre background-color par exemple yellow. Quand j'exécute, ma zone de texte par défaut elle est grise et quand je clique pour écrire, elle change automatiquement de couleur et ça devient jaune. Nous allons voir d'autres pseudo-classes que l'on va utiliser en guise de sélecteur afin de pouvoir cibler un élément d'une manière plus précise au sein du code HTML. Jetons un coup d'œil sur le code HTML. Nous avons la balise section qui contient 3 balises article: article1, article2 et article3. Imaginez que je veux cibler la première balise article afin de la styler en CSS. Dans la leçon consacrée aux sélecteurs CSS, nous avons vu qu'on peut faire ça de plusieurs manières différentes. Mais avec les pseudo-classes, on peut faire ça autrement. Donc là, on mettra le sélecteur section et ensuite article. Bon, ça veut dire que toutes les balises article qui sont des enfants directs de section, ils vont avoir ce style color blue. Quand j'exécute pour voir le résultat, alors tous les articles se sont attribués la couleur bleue. Mais imaginez que je veux appliquer cette couleur uniquement à la première balise. Alors il suffit de mettre ici: :first-child. En fait, first-child signifie le premier élément, bien le premier enfant. Ça veut dire nous avons beaucoup d'enfants, dans ce cas il y en a 3, mais c'est le premier qui est concerné par le style. Quand j'exécute, je vais voir que seulement article 1 est coloré. Maintenant, je vais faire la même chose pour l'article 3. Alors donc, il suffit de mettre à la place de first, last. Ça veut dire le dernier enfant, last child. Quand j'exécute, maintenant c'est article 3 qui change de couleur. Et si je veux accéder à d'autres objets qui ne sont ni au début ni à la fin, il suffit tout simplement de mettre ici nth-child et je mettrai le numéro identifiant d'enfant. nth-child, il accepte un entier, par exemple 1. Dire le premier élément, 2 le deuxième élément et 3 le troisième élément. Dans ce cas, je vais mettre 2 pour dire le deuxième élément qui est tout simplement la deuxième balise qui contient le texte article 2. J'exécute et je vais voir que c'est article 2 qui est coloré. Les pseudo-éléments quant à eux, ils permettent de cibler une zone particulière d'un objet. On va aller dans le code HTML, on va essayer d'ajouter une autre balise, on va mettre la balise, une autre div. Avec class mettre-texte div et je mettrai un texte dedans. C'est un texte que j'ai déjà copié avant. Voilà, ça c'est le texte. J'exécute pour voir le résultat. Alors ça donne ceci. Je vais agrandir un peu ce texte avec le CSS pour qu'il puisse s'étaler sur plusieurs lignes. Alors là, le sélecteur c'est .text parce que c'est une classe que j'ai utilisée. Font-size par exemple 18 points. Le texte maintenant est plus gros, donc il est étalé sur 2 lignes. Bon, imaginez que je veux colorer la première ligne et non pas la deuxième. Alors il suffit de mettre le pseudo-élément first-line de la manière suivante. Dans text:first-line, je vais mettre par exemple une couleur particulière, la couleur par exemple color orange. J'exécute pour voir le résultat, ça donne ceci. Donc uniquement la première ligne de mon élément est ciblée par le style CSS. Il y a juste un truc à savoir, c'est que les pseudo-classes, on les préfixe par deux points. Les pseudo-éléments, avec une bonne syntaxe, ils doivent être préfixés par double deux-points de cette manière. Mais les navigateurs, ils peuvent aussi reconnaître 2 points seulement. Alors quand je mets double deux-points, rien ne va changer parce que d'ailleurs c'est la syntaxe de base. C'est comme ça qu'il faut écrire les choses. Il y a juste une chose, c'est que la plupart des intégrateurs n'arrivent pas à distinguer les pseudo-classes des pseudo-éléments. Alors pour soulever toute ambiguïté, il suffit tout simplement de mettre deux-points pour tout. Et dans ce cas, c'est navigateur qui va se charger d'identifier les pseudo-classes et les pseudo-éléments à ses propres manières. On peut aussi mettre .text deux points first letter, c'est-à-dire la première lettre. First letter. Je maîtrise par exemple font size quarante-six points. C'est-à-dire on va agrandir la première lettre. On voit la première lettre est devenue plus grande par rapport aux lettres du même objet. On peut aussi utiliser d'autres pseudo-éléments comme before et after de la manière suivante. Alors ici dans le CSS nous avons déjà prévu une citation. Voilà, citation comme ça. Je vais enlever les guillemets qui sont là. Quand j'exécute, bien sûr, j'aurai juste le texte citation qui est écrit de cette manière. Mais imaginez que je veux ajouter les deux guillemets avec le CSS, mais avec des couleurs différentes. Je vais cibler l'élément qui s'appelle citation avec le ID comme ça. Donc je mettrai par exemple color green. J'aurai toute la citation qui sera colorée, mais moi je veux pas appliquer cette couleur à la citation elle-même, mais aux guillemets que je devrais ajouter. Alors il suffit de mettre ici deux points, deux points. Bon bien sûr pour une bonne syntaxe sinon juste deux points sont largement suffisants. Je mettrai before. Alors pour before ça veut dire que juste avant le texte qui contient l'objet citation je vais intégrer quelque chose donc content et je mettrai deux points par exemple des guillemets comme ça. Quand j'exécute bon je vais voir que les guillemets ont été intégrés de cette manière. Vous pouvez mettre ici double quotes pour spécifier que c'est une chaîne de caractères, mais puisque moi je veux carrément ajouter les doubles quotes, j'ai mis simples quotes pour alterner, pour ne pas avoir de confusion. Maintenant je vais lui appliquer une couleur dans color, par exemple orange. J'exécute maintenant et regardez bien que c'est devenu orange de cette manière. Même chose pour after, alors il suffit de copier ça. À la place de before, je vais mettre after. Et je vais ajouter maintenant après le texte des guillemets et avec la couleur orange. En fait, avant les pseudo-éléments ::before et ::after, pour faire des effets pareils, il faut intégrer une balise span avant citation et une autre balise span après. Et ces balises span, on va tout simplement les cibler avec des styles particuliers. Ça va faire beaucoup de code parce qu'il faut ajouter du HTML et aussi du CSS. Par contre, avec les pseudo-éléments ::before et ::after, On a pu seulement avec le CSS ajouter du contenu HTML et aussi le, le styler d'une manière plus concise. Merci pour votre attention et à la vidéo prochaine.
