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.
Pour ce 11ème volet, nous allons étudier la pseudo-classe CSS :nth-of-type.
Grâce à cette pseudo-classe, nous allons pouvoir manipuler des éléments HTML frères. Celà signifie que nous allons pouvoir décider que tous les paragraphes pairs et telle couleur, ou bien tous les paragraphe impairs.
Nous pourrons également manipuler un paragraphe en particulier, par exemple le paragraphe numéro 3.
Bref, grâce à la connaissance de ce sélecteur CSS, vous allez pouvoir manipuler la mise en forme de votre code HTML, sans venir l'alourdir en utilisant par exemple des attributs classe.
Je mets les codes de l'exercice d'application à votre disposition.
Liste des autres tutos de cette collection :
- La position sticky en CSS / Concept + Exercice
- La pseudo-classe checked en CSS / Concept + Exercice
- La pseudo classe empty en CSS / Concept + Exercice
- La pseudo classe focus-within en CSS / Concept + Exercice
- La pseudo-classe target en CSS / Concept + Exercice
- Le pseudo-élément marker en CSS / Concept + Exercice
- Les pseudo-classes appliquées aux liens
- La propriété CSS column-count
- La propriété CSS user select
- Le pseudo-élément CSS selection
Table des matières de cette formation CSS (durée : 20m31s)
-
- Théorie 00:06:24
- Application 00:14:07
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
J'ai vaguement vu ce pseudo-élément mais ne savais pas vraiment l'utiliser. J'aurai tendance à plutôt utiliser :nth-child() et even/odd. Mais là j'ai appris une autre façon de faire peut-être meilleure. Merci Carl :-)
-
Merci Carl 😊 Trop fort et trop bien comme toujours 😉
-
Un tuto clair, simple, efficace...mais il va falloir que je révise la peudo-classe nth-child() car la différence est subtile!
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le code source de ce tuto.
note moyenne
avis laissés