Pour ce 4ème cours en ligne, nous allons étudier la pseudo-classe "focus-within" du langage CSS.
Je vous parlerai de l'utilisation de la pseudo-classe focus-within qui va nous permettre de venir manipuler des éléments HTML autour d'un élément HTML qui recevra le focus.
Simple, rapide et efficace !
Après avoir vu la théorie, nous passerons à la pratique en réalisant un exercice.
Nous viendrons appliquer la pseudo-classe focus-within sur 2 champs d'un formulaire de connexion.
L'état des champs sera modifié dès lors que l'utilisateur ou l'utilisatrice cliquera à l'intérieur des champs.
Plus on connaît de théorie et plus il est aisé de réaliser des sites web de plus en plus complexes.
C'est pour cela que je vous propose cette série de tutoriels où nous parlerons d'un sujet avec une vidéo de cours théorique et une vidéo d'application de la théorie.
Je mets les codes de l'exercice d'application à votre disposition.
Table des matières de cette formation CSS (durée : 23m33s)
-
- Théorie 00:03:56
- Application 00:18:06
- Conclusion 00:01:31
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
:focus-within est assez spécial car on ne l'utilise pas sur l'élément lui-même mais sur son parent. Il faut juste y penser. Encore une propriété CSS peu ou pas connue. Merci pour cette nouveauté :-) A bientôt Carl.
-
Un tuto très pratique et très utile.
-
🎉 Merci infiniment Carl pour ce super tuto sur la pseudo-classe :focus-within ! Je ne connaissais pas cette astuce auparavant, et ça apporte une autre façon de travailler avec les formulaires et les interactions utilisateur. Un grand bravo pour votre travail pédagogique et votre générosité dans le partage de vos connaissances. Vous avez gagné un nouveau Fan ! 😊👍 #focuswithin #tuto #apprentissage
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Que contient le fichier source ?Le code source de l'application
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés