Améliorer vos compétences dans CSS – Sélecteurs avancés

1. Bienvenue !: Salut, tout le monde. Merci beaucoup d'avoir cliqué sur ce cours. m'appelle Verity, et je suis un développeur frontal de Sydney, en Australie. Maintenant, dans cette classe, nous allons plonger en profondeur dans les sélecteurs CSS, et comment vous pouvez les utiliser pour améliorer votre jeu de style lorsque vous travaillez sur vos projets web. Notre projet pour cette classe va travailler avec un menu de style accordéon que j'ai déjà préparé pour vous, et vous pouvez télécharger ces fichiers de cours dans la section « Votre projet » sous les fichiers ci-joints ci-dessous cette vidéo. Nous allons regarder cet accordéon et voir comment nous pourrions utiliser ces sélecteurs avancés pour styliser des éléments différentes manières et des façons ciblées plus spécifiques qui vont améliorer vos projets Web. Maintenant, ce cours suppose que vous avez travaillé avec CSS et HTML avant, mais si vous n'avez jamais touché l'un ou l'autre de ceux-ci, ne vous inquiétez pas, vous pouvez revenir en arrière et jeter un oeil à ma classe précédente, qui s'appelle Comment construire un site Web, et cela vous donnera quelques compétences fondamentales en HTML et CSS. Ensuite, vous pouvez suivre ce cours qui ne fera que renforcer les compétences que vous apprendrez dans cette classe. Maintenant, si vous êtes coincé à n'importe quel moment, assurez-vous de commenter ci-dessous, et je vais essayer de vous aider. Espérons que vos camarades de classe essaieront de vous aider et, bien sûr, assurez-vous de mettre en valeur votre travail dans la section projets. J' aimerais voir comment vous personnalisez l'accordéon et les effets que vous pouvez trouver. Il suffit d'expérimenter avec chacun des différents types de sélecteurs, parce que la meilleure façon d'apprendre est, bien sûr, de faire. D' accord. Si vous êtes prêt à commencer, assurez-vous de télécharger les fichiers de vos cours et allons-y. 2. SÉLECTEURS DE BASE: Si vous avez déjà travaillé avec CSS, vous avez probablement rencontré les trois types de sélecteur de base, mais juste au cas où, nous allons faire un petit résumé rapide maintenant pour assurer que tout le monde est sur la même page. Ainsi, nos sélecteurs de base que vous utiliseriez tous les jours en CSS sont vos sélecteurs d'élément, de classe et d'ID. Maintenant, juste pour vous rappeler rapidement ce que sont chacune de ces choses. Un sélecteur d'élément est la façon dont vous ciblez n'importe quel élément sur la page d'un nom spécifié. Ainsi, dans votre html, vous pouvez avoir une balise P, une balise image, une balise div ou une span. Juste à titre d'exemple, il pourrait être n'importe quoi et la façon dont vous ciblez cela dans votre CSS est simplement en écrivant le nom de l'élément en CSS suivi vos crochets bouclés et ensuite vos styles à l'intérieur de la supports. Maintenant, une classe applique des styles à tous les éléments d'une page que vous avez donné le nom de classe spécifié. Une classe est écrite avec un arrêt complet devant elle et vous pouvez le nommer comme vous voulez tant que vous donnez l'attribut de classe à l'élément auquel vous voulez qu'il soit appliqué et mettez le nom entre les virgules. Maintenant, la classe diffère d'un sélecteur d'élément en ce qu' un sélecteur d'élément sélectionnerait chaque paragraphe de la page, alors qu'un sélecteur de classe ne va cibler les éléments auxquels vous avez donné la classe. Donc, disons que vous aviez une série de balises de paragraphe sur votre page. Si vous n'avez appliqué la classe qu'à l'un de ces paragraphes, les styles ne seront appliqués qu'à ce paragraphe spécifique. Enfin, notre sélecteur d'ID qui est le plus spécifique des trois. Il est écrit en CSS en utilisant un hachage avant le nom de l'ID. Il fonctionne très similaire à une classe, mais il est important de se rappeler qu'un ID signifiant identification, vous ne pouvez utiliser un ID qu'une seule fois sur une page. Si vous l'utilisez plus d'une fois, cela va causer toutes sortes d'erreurs et de problèmes pour vous. 3. HÉRÉDITÉ ET SPÉCIFICITÉ: Hé ! Vous avez probablement entendu cela avant, mais l'acronyme de CSS signifie feuilles de style en cascade, et cela fonctionne essentiellement sur une méthode de type cascade où plus les styles sont loin vers le bas, plus ils sont importants dans le navigateur. Donc, tout ce que vous avez écrit en haut, s'il y a un sélecteur qui cible la même chose en bas, ce style va s'habituer. Maintenant, cela peut fonctionner de haut en bas linéaire, mais aussi en termes de spécificité. Plus une classe est imbriquée, plus elle est spécifique, et donc plus importante. Maintenant, dans notre accordéon, nous voyons cela démontré tout le long de nos feuilles de style mais nous allons entrer dans notre html juste pour avoir un petit coup d'oeil à un exemple. Le premier exemple étant ce titre de leçon, cette petite section ici que nous avons dit quelle leçon nous sommes. Sur cette section de titre de leçon, je lui ai donné une classe et un ID de titre. Si nous allons dans notre CSS, nous pouvons voir que j'ai appliqué text-align : center à la classe lesson-title. Maintenant, pour vous montrer comment l'héritage fonctionne avec des sélecteurs de niveau égal d'importance, je vais créer une deuxième instance du titre de leçon. C' est la même classe appliquée à la même div. Ils ont le même niveau d'importance, mais notre deuxième instance de titre de leçon est plus loin dans la feuille de style, ce qui signifie qu'il remplacera notre première instance. Si nous enregistrons ceci et nous retournons sur notre page, nous pouvons voir qu'en ce moment c'est text-align ; center, qui est la classe originale, mais si je rafraîchis la page, vous pouvez voir que cette deuxième instance la remplace et applique le texte aligner : à gauche. Maintenant, les classes sont probablement le sélecteur le plus commun que vous allez utiliser en CSS, mais vous avez probablement aussi vu l'utilisation d'identifiants ici et là. Maintenant, comme son nom le suggère, un ID est un identifiant unique hautement spécifique que vous pouvez appliquer à votre HTML pour le différencier des autres éléments de la page. Mais, vous devez garder à l'esprit, comme je l'ai dit précédemment, que vous ne pouvez utiliser un ID qu'une fois sur une page, et que tous les styles que vous appliquez dans l'ID vont remplacer tous les sélecteurs de niveau de classe ou d'élément car il est donné un niveau d'importance plus élevé dans les CSS. Donc, revenons dans notre CSS et je vais montrer ce que je veux dire. Nous allons nous débarrasser de notre deuxième instance de la classe lesson-title. On n'a pas besoin de ça pour le moment. Vous pouvez voir ici, si je le commente à nouveau, j'ai sélectionné l'ID de titre en utilisant le hachage, puis le nom de l'ID, qui est le titre dans ce cas, et j'ai appliqué le texte à aligner directement. Maintenant, si ID et classes ont le même niveau d'importance, il suivrait l'héritage de style en cascade que les classes normales font. Si tel était le cas alors, le texte aligné devrait être centré car il est plus bas sur la page. Mais, parce que dans les ID CSS ont un niveau d'importance plus élevé, nous pouvons voir sur notre page que si je l'actualise, il va en fait à droite même si nous avons écrit ce style plus haut dans la page parce que c'est un ID et il a un niveau d'importance plus élevé en CSS, il remplace tout ce qui est en dessous s'appliquant à cette div spécifique. Lorsque vous travaillez sur des projets plus importants, j'évite généralement d'utiliser des ID autant que possible dans mon CSS car cela crée un niveau supplémentaire de complexité avec un héritage et une spécificité solides. La plupart du temps, les jeunes développeurs ou développeurs qui commencent tout juste, essaieront d'utiliser quelque chose comme un ID qui a un niveau de valeur plus élevé pour essayer de remplacer les problèmes qu'ils ont dans leur code. Maintenant, je vous encourage vraiment, vraiment, fortement à ne pas faire ça. Vous allez juste créer plus de chagrin pour vous-même quand ce problème revient et vous devrez trouver un autre moyen de le remplacer. Il est toujours préférable de résoudre le problème à partir de son noyau plutôt que d'utiliser des tactiques de force brute, comme les identifiants. 4. STYLES IMBRIQUÉS VS GLOBAUX: Une des questions que j'ai posées lors de mon dernier cours était la différence entre un style global et un style imbriqué en termes de spécificité. Donc, nous allons jeter un coup d'œil à ça maintenant. Vous pouvez voir ici accordéon dans le navigateur, c'est juste une série de tirages, avec différents types de contenu tout au long. Donc, si je vais dans mon fichier d'index, vous pouvez voir que j'ai la classe d'accordéon enveloppant qui va tout autour. Ensuite, nous avons un conteneur pour chacun de nos tirages avec le tirage de la classe, et à l'intérieur nous avons des étiquettes et des descriptions. Maintenant, dans notre CSS, vous pouvez voir que j'ai écrit le dessin de la classe, et étant donné le style de bordure de pointeur de curseur en bas de deux pixels blanc solide. Maintenant, parce qu'il n'y a rien avant cette classe, c'est une classe globale. Ce que cela signifie, c'est que peu importe combien de fois j'utilise cette classe sur la page, et peu importe ce que je l'utilise, même si ce n'est pas censé être un tirage au sort, ces styles seront appliqués. Donc, si par exemple, si je devais écrire, transformer, faire pivoter 5 degrés, et je sauverai ça et nous allons jeter un coup d'oeil. Vous pouvez voir que chacun des tirages a tourné de 5 degrés. Je sais que ça a l'air un peu stupide, mais c'est juste un exemple. Alors maintenant, évidemment, chacun de nos Dibz a le tirage au sort de la classe, donc c'est logique qu'il le fasse. Mais qu'en est-il si dans notre titre nous devions écrire le tirage au sort de la classe ? Ce n'est pas dans notre accordéon, mais si nous le rafraîchissons, le même style s'applique. Maintenant, les classes globales peuvent être très utiles, car disons par exemple, vous avez une classe contenant que vous voulez utiliser encore et encore, ou un style de base. Supposons que vous voulez que tous vos liens aient une couleur rouge. Cela peut être très utile. Mais cela peut aussi être très frustrant sur, disons lorsque vous construisez un site Web multi-pages, et que vous réutilisez accidentellement une classe, qui ressemble à un nom de classe très général, mais vous ne vouliez pas le faire. Alors dis quelque chose comme une étiquette, disons que nous avons l'étiquette de classe ici. Dans ce cas, nous utilisons l'étiquette comme section verte dans un tirage au sort, mais vous pouvez utiliser une étiquette dans le contexte de disons, d'un formulaire, d'une image ou d'un quiz. Ainsi, vous pourriez avoir un site Web de 100 pages et utiliser des étiquettes dans tous les types d'endroits. Mais vous ne voudrez peut-être pas nécessairement qu'ils aient tous un fond vert et un texte blanc. C' est donc là que l'imbrication devient très utile. Donc, dans notre index, vous pouvez voir que notre étiquette est contenue par un div parent qui a le tirage au coût. Donc, nous avons la classe mondiale du tirage au sort, un espace, puis l'étiquette de l'essai et nous avons appliqué nos styles. Donc maintenant, si je devais entrer dans notre HTML, et je vais me débarrasser du tirage, et écrire l'étiquette, et rafraîchir, et rien ne se passe. Il s'agit d'une étiquette pour le site techniquement, mais il n'est pas donné l'arrière-plan vert, car il a été imbriqué. Donc, à moins que vous n'ayez ce conteneur de dessin en dehors de l'étiquette, ces styles ne seront pas appliqués. Maintenant, une bonne chose à retenir, si vous avez des classes, disons comme avec notre étiquette et notre description, nous avons différents styles appliqués à chacune de ces classes, mais il peut y avoir des choses que vous voulez qu'elles partagent. Une chose que vous pouvez faire si vous voulez garder vos classes séparées, mais appliquer certains styles qui sont les mêmes, vous pouvez réellement chaîner les classes en les séparant avec une virgule. Donc, j'ai le tirage au sort et l'étiquette, puis le dessin et la description, et je veux leur donner une bordure d'un pixel rouge solide, nous les avons enchaînés ensemble. Donc maintenant, l'étiquette et la description ont reçu une bordure. Savoir quand utiliser un style global par rapport un style imbriqué est quelque chose qui revient à vous en tant que développeur, et vous évaluez votre cas d'utilisation particulier. Un style global est idéal pour les choses que vous souhaitez réutiliser encore et encore dans votre site, mais un style imbriqué que je recommande en fait pour la plupart de vos styles pour les mettre dans les scénarios imbriqués afin qu'ils ne fuit pas dans des endroits où vous ne les voulez pas, mais aussi de garder à l'esprit que si vous descendez trop de niveaux dans un style imbriqué, il peut devenir trop spécifique et trop fragile, sorte que vous ne serez pas en mesure de le réutiliser n'importe où sur votre site. Une bonne règle générale est de trois niveaux d'imbrication maximum, de sorte que vous conservez cette flexibilité de pouvoir styliser encore et encore, mais pas si flexible qu'ils peuvent être utilisés n'importe où sur le côté. 5. SÉLECTEURS UNIVERSELS: Un sélecteur universel est un concept assez simple et cela signifie littéralement que vous pouvez appliquer des styles à tout sur la page, sorte que le style est universel. Maintenant, en CSS, si nous allons dans CSS, vous pouvez voir que le sélecteur universel est appliqué en CSS en utilisant un astérisque tout seul, et vous pouvez voir que dans notre code et exemple, j'ai utilisé le sélecteur universel pour appliquer une famille de polices de san-serif si je commente cela et l'sauvegarde. Jetons un coup d'oeil. Vous pouvez voir qu'il remonte à sa forme initiale. Donc, en appliquant ce style de famille de polices san-serif, cela affecte tout sur la page. Partout où il y a une police, elle a changé la police. Je l'ai également utilisé pour définir la taille de la boîte à border-box, ce que je vous recommande de faire avec chacun de vos sites Web que vous avez construits. Je ne vais pas entrer dans ce que fait réellement la taille des boîtes dans cette classe. J' ai couvert cela dans ma classe originale How to Build a Website, donc vous pouvez y aller si vous voulez en savoir plus sur ce que cette propriété fait réellement. 6. COMBINATEURS: La prochaine étape que nous allons aborder est les combinateurs. Maintenant, vous avez réellement utilisé des combinateurs peut-être sans réaliser si vous avez écrit n'importe quel type de CSS auparavant. Un combinateur est fondamentalement un moyen que vous pouvez cibler des éléments sur une page en fonction de ce qui la précède et la suit. Donc, ce sont quatre principaux types de combinateurs que nous allons examiner, et ce sont : descendant, enfant, frère adjacent et frère général. Maintenant, un combinateur descendant, vous avez probablement utilisé avant, peut-être que vous ne saviez pas comment ça s'appelait. C' est probablement le combinateur le plus commun, qui consiste simplement à ajouter un espace entre deux classes, sorte que vous pouvez cibler tous les éléments de correspondance qui sont un descendant d'une classe particulière. Si nous allons dans le CSS de notre accordéon, vous pouvez le voir partout. Donc, je vais dessiner pour cibler les étiquettes, nous voulons cibler la description, l'image. Cela veut dire essentiellement, dans le tirage, tout ce qui a l'étiquette de classe devrait avoir ces styles et c'est un combinateur descendant. Le suivant est légèrement plus spécifique, et c'est un combinateur enfant. Donc, comme vous pouvez le voir ici sur la gauche, nous avons une classe parent et le paragraphe enfant. Maintenant, vous pourriez penser à vous-même en quoi c'est différent d'un descendant. Eh bien, si nous retournons dans notre CSS, et nous avons un coup d'oeil. Jetons un coup d'oeil dans notre index en fait. Si nous commençons à notre premier tirage, vous verrez que dans notre description nous avons deux paragraphes et ensuite nous avons un sous-conteneur de description avec un paragraphe supplémentaire à l'intérieur de celui-ci. Si nous allons dans le navigateur, nous pouvons voir que vient de sortir ressemblant à trois paragraphes. Maintenant, si nous allons dans notre CSS et nous ciblons ces paragraphes. Donc, disons, dessinez, description, puis paragraphe. Donc, nous n'utilisons que des sélecteurs de descendant pour la minute, et nous disons que nous voulons qu'ils aient la couleur rouge, simple sauver ceci, nous allons actualiser notre page, et tous les paragraphes dans le dessin à tous les niveaux sont rouges. Maintenant, c'est un combinateur descendant. Un combinateur enfant, copions ceci, sélectionnez-le vers le bas. Nous allons remplacer ce combinateur descendant par un combinateur enfant. Donc, nous utilisons juste une petite flèche pour dire un enfant, et nous voulons que tous les enfants, les enfants directs aient la couleur du violet. Maintenant, si nous retournons dans notre page et nous rafraîchissons, vous pouvez voir que les deux premiers sont violets, mais le troisième est toujours rouge. Alors, allons dans nos DevTools, et nous allons jeter un coup d'oeil à la raison. Donc, si nous regardons notre HTML, vous pouvez voir, alors que ce paragraphe inférieur est un descendant de la description, pas un enfant immédiat, c'est plus comme un petit-enfant parce qu'il est en bas sur un troisième niveau. Notre prochain combinateur est un frère adjacent. Donc, cela cible le frère suivant après le sélecteur initial. Vous pouvez le voir ici. Nous avons la sélection initiale plus signe, puis le frère qui le suit immédiatement. Donc, nous allons retourner dans notre CSS. Dans notre troisième tirage au sort, si nous descendons ici, vous pouvez voir que le tirage trois a un paragraphe puis deux images. Pour montrer ce qu'un sélecteur adjacent ferait, si nous utilisons notre dessin, la description, paragraphe, puis le frère adjacent de l'image, et nous allons mettre une bordure de 10 pixels en noir massif autour d'elle. Donc, ce que cela signifie, est toute balise de paragraphe qui est un descendant de la description. Nous voulons cibler le frère immédiat s'il s'agit d'une image. Donc, nous allons enregistrer ça, aller dans notre navigateur. Vous pouvez voir qu'il est seulement ciblé cette première image, mais il est laissé comme la seconde seule. Parce que si vous vous souvenez dans notre HTML, nous avons un paragraphe, une image, une image. Donc, celui-ci ici est le frère adjacent, c'est le frère suivant après la balise de paragraphe. Si nous voulions les cibler tous les deux, nous utiliserions le frère général, qui est cette petite vague ici et qui ciblera tous les frères et sœurs à ce niveau. Donc, essayons ça, nous allons remplacer le plus par notre petite vague, et économiser. Rafraîchissez, ouvrez notre tirage au sort, et vous pouvez voir qu'il a ciblé les deux. 7. SÉLECTEURS D'ATTRIBUTS: Un sélecteur d'attribut est un moyen très pratique pour vous de cibler des éléments sur une page en fonction des attributs que vous avez déclarés dans votre code HTML. Donc, si nous allons jeter un oeil à notre fichier d'index, vous pouvez voir que nous avons déjà tous différents types d'attributs. Un ID est un attribut, une classe est un attribut. Sur nos images, la source est un attribut. Vous pouvez voir ici sur les tirages, j'ai en fait inclus un attribut de type de données. C' est même une façon que vous pouvez créer vos propres attributs personnalisés aussi longtemps que vous le préfacez avec des données, puis un petit trait d'union, vous pouvez le nommer comme vous voulez. Donc, peut-être que vous voudriez l'appeler nom de données ou données actives ou ce que vous voulez. Mais nous allons rester avec le type de données pour le moment. La façon dont vous ciblez cela en CSS, je viens de copier quelques informations ici dans le fichier qui sera dans vos fichiers de projet finis. C' est juste un extrait de la page W3Schools sur sélecteurs CSS parce qu'ils sont un peu difficiles à retenir en haut de votre tête. Mais essentiellement, la façon dont vous ciblez un attribut dans votre CSS est par exemple, nous voulions cibler les sorties avec cet attribut de type de données. Tu pourrais juste appeler le tirage au sort de la classe. Ensuite, sans espaces parce que vous voulez cibler le même élément sur lequel est tiré, vous écrivez le nom de l'attribut. Donc, dans ce cas, je veux cibler chaque tirage qui a le type de données d'attribut, quelle que soit la valeur du type de données. Donc, donnons à cela une bordure d'un pixel rouge solide, et nous allons sauver ça et jeter un coup d'oeil. Vous pouvez voir qu'il est ciblé chaque tirage car nous avons cet attribut de type de données sur chaque tirage. Maintenant, dites que vous voulez seulement cibler quelque chose d'une valeur spécifique. Donc, vous avez votre attribut de type de données, mais vous voulez uniquement cibler ceux qui sont du type de données T01, par exemple. Donc, si nous sauvegardons ceci et actualisons, maintenant c'est seulement cibler ceux avec T01. Maintenant, cela peut être très pratique. Vous pouvez l'utiliser de beaucoup de façons différentes. Je suis sûr que vous trouverez des moyens lorsque vous construisez vos sites Web pour l'utiliser. N' oubliez pas, vous pouvez également l'utiliser en combinaison avec d'autres types de sélecteurs. Ainsi, par exemple, avec un sélecteur de descendant. Dites que nous voulons cibler uniquement les tirages qui ont le type de données T01, et nous voulons cibler les étiquettes dans ces tirages et leur donner une sorte de fond de couleur moutarde. Nous pouvons le faire aussi. Maintenant, comme vous le voyez, nous avons une petite liste très pratique ici. Un autre exemple est l'utilisation de cette petite vague, vous pouvez cibler une partie de ce qui constitue la valeur de l'attribut. Donc, ici, ils ont l'exemple du titre, comprend le mot fleur. On pourrait l'utiliser dans notre accordéon pour cibler leurs images. Donc, si nous disons dessiner l'image et nous disons que la source devrait inclure le mot vélo, par exemple, nous voulons faire pivoter toutes les images de vélos de cinq degrés. Alors, sauvegardons cela et actualisons et ouvrons notre tirage au sort. Oups, et ça n'a pas marché. La raison en étant que j'ai écrit la source au lieu de alt qui est l'endroit où vous écririez la description de ce que l'image est. Donc, si nous allons dans notre HTML, vous pouvez voir alt bike, alt beignets, et nous voulons seulement cibler ce qui a le mot bike dedans. Donc, même si nous ajoutons d'autres mots, vélo bleu, et que nous l'épargnons, il ciblerait toujours le vélo parce que la valeur de l'étiquette alternative inclut le mot vélo. Une autre valeur d'attribut utile est celle-ci ici où vous pouvez cibler n'importe quel attribut que vous aimez et utiliser le $ pour rechercher la valeur et trouver tous les attributs dont la valeur se termine par un certain ensemble de mots ou de lettres. Ainsi, par exemple, nous pourrions chercher à nouveau l'image dessinée. Cherchons la source cette fois. Nous allons chercher n'importe quelle image qui a la fin de jpg dans la source. Nous allons appliquer la transformation, disons, l'échelle 1.2. Donc, cela va augmenter de 20 pour cent. Nous sauvegardons et rafraîchissons. Vous pouvez voir qu'il a augmenté en taille. Maintenant, il y a toute une liste de différents sélecteurs d'attributs que vous pouvez utiliser, et je vous encourage vraiment à jouer avec eux, juste expérimenter et avec les différents types d'effets que vous pouvez obtenir avec ces attributs sélecteurs. 8. PSEUDO-CLASSES: Maintenant, la classe Pseudo est un moyen que vous pouvez cibler différents états dans votre HTML et CSS. Donc, disons que vous avez quelque chose comme un lien, vous utiliseriez une classe pour un sélecteur d'élément ou tout ce que vous voulez styler le lien dans son état par défaut, comment le verrait-il dire lorsque vous chargez la page. Mais quand vous voulez qu'il dise survolez ce lien, vous pouvez vouloir que les styles soient légèrement différents. Vous voudrez peut-être qu'il change de couleur ou qu'il soit mis en surbrillance ou souligné. Donc, vous utiliseriez une pseudo classe pour cibler l'état de survol de cet élément. Si nous allons dans notre CSS, j'ai collé quelques exemples de pseudo-classes que vous pouvez utiliser, y compris notre hover, notre visité et l'avant et après. Nous allons juste jeter un coup d'oeil sur la façon dont vous utiliseriez réellement ces produits. Donc, nous savons que dans notre accordéon nous avons nos tiroirs avec notre étiquette dans la description. Alors, pourquoi ne pas utiliser l'état de vol stationnaire pour cibler notre étiquette ? Donc, nous allons écrire dessiner, étiqueter et nous pouvons utiliser hover en faisant un petit deux-points, puis en écrivant le nom de la pseudo classe, des crochets bouclés, et nous voulons que nos arrière-plans changent pour être cette couleur moutarde quand nous tenons dessus avec notre souris. Si je sauvegarde cela, et nous actualisons, et vous pouvez voir que cet effet fonctionne maintenant. Une autre classe pseudo que j'utilise assez régulièrement, que je voulais mentionner, serait avant et après les pseudo-classes. Maintenant, cela vous permet de modifier l'état de/ou d'ajouter des choses de chaque côté de l'avant ou après votre élément. Donc, disons avec notre titre de leçon, un peu h1 ici, ce que vous pouvez réellement faire est que si je cible le titre de la leçon et ensuite celui de la hachure, je peux utiliser la pseudo classe avant d'ajouter du contenu avant le h1. Donc, si disons par exemple, je voulais ajouter deux barres obliques dans un espacement, et je veux qu'elles aient la couleur rose, et je veux qu'elles aient la taille de police de 35 pixels. Disons ça et jetons un coup d'oeil à ce qui se passe. Vous pouvez voir qu'il est là, il apparaît. Donc, nous avons écrit une extension de notre HTML dans CSS. Maintenant, je ne recommande pas d'écrire du HTML dans votre CSS mais disons, vous essayez de créer des champs de formulaire personnalisés ou des boutons d'entrée ou quelque chose comme ça, il peut être vraiment utile de pouvoir ajouter dans ce petit peu supplémentaire de quelque chose avant ou après un élément que vous pouvez styliser et personnaliser. Vous verrez de nombreux exemples de cela lorsque vous commencez à créer des fonctionnalités plus créatives de votre site Web. 9. ET MAINTENANT ?: Voilà, tu y vas. Vous avez examiné certains des types sélectionnés les plus avancés disponibles en CSS. J' espère que vous avez appris de nouvelles compétences et fait quelques expériences avec votre codage pour voir quel genre de styles vous venez avec. J' aimerais voir le travail que vous avez fait dans la section des projets ci-dessous. Donc, assurez-vous de télécharger des captures d'écran, extraits de code, tout ce que vous voulez, j'aimerais le voir. Si vous souhaitez voir plus de cours pour moi à l'avenir, assurez-vous de me suivre sur Skillshare et les réseaux sociaux et je vous le ferai savoir quand je mettrai à jour de nouveaux cours. Si vous avez quelque chose que vous aimeriez vraiment apprendre, assurez-vous de commenter ci-dessous ou de me tweeter ou ce que vous voulez. Dites-moi ce que vous aimeriez apprendre et je peux absolument essayer de faire un cours à ce sujet pour vous. Si vous vous sentez très gentil, vous pouvez laisser un commentaire sur ce cours, cela m'aiderait vraiment. J' espère que vous avez apprécié la classe et je vous verrai la prochaine fois.