L'essentiel des CSS

Aborder les pseudo-classes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Abordez les pseudo-classes et les pseudo-éléments en trois séquences. Commencez par les pseudo-classes. Vous allez pouvoir les explorer simplement et en comprendre les mécaniques.
05:08

Transcription

Il existe des mécaniques internes aux CSS qui s'appellent les pseudo-classes et les pseudo-éléments qui vont nous permettre de pouvoir agir de manière très fine sur les sélecteurs, de pouvoir soit rajouter des classes, soit de rajouter des éléments. On les appelle des pseudo-classes et pseudo-éléments parce que ceux-ci n’existeront pas dans l'arborescence du document. Alors je propose que l'on regarde dans un premier temps les pseudo-classes puis on viendra ensuite sur les pseudo-elements mais on va décomposer l'ensemble de ces séquences en trois séquences de façon à ne pas alourdir et de pouvoir aller bien dans le détail. Si je prends l'exemple d'une pseudo-classe assez connue qui est la :nth-child(2n+1) -on verra comment utiliser ses attributs et comment utiliser cet élément- ça va permettre de cibler les éléments impairs d’un contenu en partant du premier élément. En gros, ici le 1 va dire : « on commence sur le premier et ici toutes les deux instances, on en sautera une à chaque fois.» Qu'est-ce que va faire, par exemple, sur un fragment de code qui serait une liste de paragraphes le moteur CSS ? Il va rajouter une pseudo-classe comme une classe invisible qui apparaîtrait en partant du premier élément p et en sautant deux éléments à chaque fois, un sur deux ça serait cette pseudo-classe C'est une classe qui ajoute. On a des classes comme ça aussi sur la gestion événementielle de l'utilisateur, c'est-à-dire qu'on va pouvoir avoir des pseudo :hover, :visited, :link, etc. qui vont nous permettre d'agir sur l'élément lorsqu'il sera survolé. Là, pareillement, la mécanique va rajouter une classe au moment du survol. On a des éléments de types :not() : « tu prendras tout sauf ce type d'éléments qui seront exclus du ciblage. » Bien sûr, on en a d'autres. Ce que je vous propose, c'est de partir d'un exemple directement et de se focaliser sur les pseudo-classes. Ici on a un document HTML, qui est constitué de plein de paragraphes, ici qu'on envoie directement dans la page de rendu. Et sur notre page CSS, nous allons pouvoir ajouter simplement p:first-child et on va cibler cet élément. Il sera le premier élément, premier enfant paragraphe. Voyez qu'ici on cible ce premier élément. Bien entendu, on aurait pu faire de la même manière avec un :p-last child. Ce que je vous propose c'est de faire glisser le contenu ici directement, comme ça vous avez toujours la classe définie, pas besoin de la commenter. Ici vous voyez, j'attrape le dernier élément de paragraphe. Revenons à ce fameux :nth-child. Il est possible de l'utiliser en plaçant tout un certain nombre de paramètres. Donc ici, dans les paramètres, on va pouvoir placer par exemple even qui veut dire « je prends tous les éléments pairs. » Ici, vous voyez, le 1 il n'est pas pris, le 2 est pris, 3 non, 4 oui, etc... On aurait pu faire de la même manière odd. On va inverser, je vais commenter cette partie-là pour pouvoir la laisser ici. Voyez, bien entendu à l'inverse, l'élément également ici. C'est très simple de pouvoir, comme ça, avec une simple pseudo-classe sélectionner des éléments sans rajouter quoi que ce soit dans notre HTML. On va pouvoir également passer un simple chiffre. Par exemple le chiffre 4, si je place la déclaration à l'intérieur ici. J'enregistre, j'actualise. Je n'ai ciblé que le quatrième élément de la série de paragraphes. Là où cela devient plus sympa, c'est lorsqu'on va utiliser la fameuse formule qu'on a vu dans la présentation (2n+1). Si j'enregistre ici, vous voyez bien qu'on les a un sur deux. Ça revient à faire un even ou un odd, on peut jouer sur ce principe-là. Mais regardez si ici maintenant je place 3 au lieu de placer 1. J'actualise. Voyez que je pars à partir du 3ème. 1, 2, 3 Et cette fois-ci je vais les avoir tous un sur deux. Bien entendu ici on pourra changer à 4 n. Ça devient très facile à utiliser pour pouvoir aller jongler sur des éléments. Que se passerait-il si on mettait un n négatif ? À ce moment-là on va faire un peu ce qu'on faisait tout à l'heure avec l'élément 4, sauf qu'on va dire je pars du premier jusqu'au troisième. Voilà, vous allez pouvoir jongler avec ces éléments-là Bien entendu vous avez d'autres séries comme le :nth-of-type() entre autres bien sûr. Ici vous voyez les :only-of-type. Vous allez pouvoir choisir le :nth-last-child(), le :nth-last-of-type(). C'est-à-dire que dans un élément conteneur on n'a pas forcément que des paragraphes. On peut avoir tous types d'éléments, on peut dire non mais moi je veux tous les p par exemple les balises span de ce contenu, etc... Vous allez pouvoir cibler. Je vous invite maintenant que vous avez compris le principe d'utilisation des pseudo-classes à venir les utiliser toutes, une par une et de regarder leur fonctionnement. Alors terminons quand même avec une pseudo-classe interactive qui serait un :hover. Si j'enregistre et que j'actualise rien ne se passe. Par contre dès que je survole un élément. Vous voyez que ici ce n'est pas un lien, c'est un simple paragraphe mais je vais pouvoir lui donner un aperçu différent tout simplement en utilisant la pseudo-classe :hover. Je vous invite maintenant à retourner sur le site de mozilla ou tout autre site où vous allez pouvoir trouver la liste intégrale des pseudo-classes et d'aller jouer avec pour voir toutes les possibilités qui s'offrent à vous. Maintenant, je vous invite à passer à l'étape suivante pour aller explorer plus en détail justement ces fameux liens.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !