La pseudo classe focus-within en CSS / Concept + Exercice
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO La pseudo classe focus-within en CSS / Concept + Exercice

Carl Brison
2,00€
Paiement différé ou en 3x avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Théorie
Leçon 2
Application
Leçon 3
Conclusion

Plan détaillé du cours

Leçon 1Théorie
03m56s
Leçon 2Application
18m06s
Leçon 3Conclusion
01m31s

Avis des apprenants

Détail des avis
8
Apprenants
4
Commentaires
5/5
Note moyenne
5/5
4
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 13/05/2023
: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.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)
Besselbach
Besselbach
Publié le 17/04/2023
Un tuto très pratique et très utile.
Carl Brison
Carl Brison
Merci pour votre commentaire ;-)
Alain Tardif
Alain Tardif
Publié le 15/04/2023
🎉 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
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Alain ;-)

Vos questions sur le cours

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

Payer plus tard

Prix d'achat : 2,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1342 tutos gratuits

Notre politique de protection des données