Bienvenue à tout le monde.
Aujourd'hui, nous allons parler très brièvement des pseudo-classes et des éléments.
Nous avons donc travaillé avec différents types d'éléments tout au long de ce cours,
et comment nous pouvons les structurer et les styliser.
Eh bien, les pseudo-éléments sont un peu différents des autres choses que
nous avons vues auparavant en ce qu'ils sont très dépendants de la structure DOM, et
certains d'entre eux sont en fait dynamiquement peuplés.
Donc, pour être honnête, vous l'avez vu avant quand nous avons parlé de
liens de style parce que les liens avaient ces différents états.
Un exemple que nous avons utilisé était l'idée de vol stationnaire.
Si vous survolez un lien, vous pouvez changer le style pour vous débarrasser de peut-être le
soulignement ou changer la couleur.
Donc, parlons de certains de ces différents types de pseudo-classes au-delà de
ce que vous pouvez faire avec juste un lien.
J' ai commencé avec celui qu'on a vu avant.
Vous pouvez avoir un lien et aussi un lien qui a été visité.
Vous pouvez également réagir à différentes actions de l'utilisateur.
Donc, si quelqu'un survole un paragraphe ou
survole une balise H1, vous pouvez toujours y réagir.
Ce n'est pas seulement un lien.
Vous pouvez également avoir actif, et
actif est lorsque vous maintenez le bouton de la souris enfoncé sur une sorte d'élément.
Et le dernier, c'est le focus.
Focus serait quand quelqu'un tabulation à travers la page,
vous pouvez mettre l'accent sur chacun d'entre eux.
Enfin, celui qui a beaucoup de sens et que vous avez probablement vu auparavant
est que vous pouvez composer les pseudo-classes de formulaires ou d'interfaces.
Si la case à cocher a été
cochée ou cochée, vous pouvez voir que parfois ils la rendent jaune.
Ou si vous avez déjà été sur un site et que vous n'êtes pas autorisé à taper quelque chose
jusqu'à ce que vous tapez quelque chose dans une zone ci-dessus, plus haut dans, ils ont tendance à le griser.
Donc, la façon dont tu ferais ça, c'est que tu pourrais dire, tu sais quoi ?
Si quelqu'un passe au-dessus de mon paragraphe, je veux juste faire une bordure.
Border:1 px.
Maintenant, même s'il n'y a pas de place sur le DOM où ils ont p:hover,
cela devrait fonctionner pour vous lorsque vous mettez cette règle de style dans.
Ainsi, vous pouvez également styliser en fonction de la position structurelle
des différents éléments.
Vous avez un premier enfant, un dernier enfant, un nième enfant.
La façon dont on travaille est de mettre un numéro pour dire le cinquième enfant ou
le dixième enfant.
Tu ne peux avoir qu'un enfant.
Vous avez également d'autres choses différentes telles que le premier de type, le dernier de type,
le seul de type.
Et encore une fois, vous avez juste l'élément, le deux-points,
puis le nom de la pseudo-classe que vous voulez styliser. Les
pseudo-éléments ne font pas nécessairement partie du DOM, mais
ils peuvent être utilisés pour styliser des parties spécifiques ou uniques de la page.
Donc, certains exemples peuvent si vous avez un paragraphe et que vous voulez mettre dans cette
première lettre fantaisie avec une police différente, vous pouvez utiliser le premier pseudo élément de lettre.
Même avec la première ligne, vous pouvez générer des choses à afficher avant ou
après les éléments.
Beaucoup de fois, si vous coiffez quelque chose comme les informations de carte de crédit,
vous pouvez aller de l'avant et mettre les différents types de cartes de crédit, mais
avoir un peu avant que cela dit, et hé, mettre une photo ici.
Vous pouvez également styliser uniquement des fragments de différentes sélections.
Maintenant, je ne vous ai pas donné beaucoup de code quand nous sommes passés par ici parce que vraiment utiliser des
pseudo-classes et des pseudo-éléments est très unique à la page que vous allez faire.
Donc plus tard, quand nous parlons de tables, gardez un oeil dehors parce que je vais utiliser
beaucoup de pseudo-classes et de pseudo-éléments là-bas.
Il est vraiment important de réaliser que je ne pourrai pas couvrir
toutes les combinaisons de tout ce que nous apprenons.
Mais je veux vous donner les outils pour que vous puissiez sortir et
étudier comment vous pouvez ajouter de nouveaux styles cool à votre page.
Bonne chance.