À de nombreuses reprises, vous souhaitez modifier un élément de votre site Web avec CSS, mais lorsque vous allez le faire, vous vous rendez compte que l'élément n'a pas de classe ou d'identifiant.
Ne vous inquiétez pas, tout n'est pas perdu.
Grâce aux PseudoClasses, nous pouvons faire bien plus que vous ne l'imaginez et dans ce tutoriel, nous allons voir comment le faire.
Tout ce que nous allons voir dans ce tutoriel cela fonctionne pour n'importe quelle page que vous créez avec HTML et CSS.
Et concrètement, bien sûr c'est valable pour WordPress, en fait dans nos exemples on va le faire dans WordPress.
📺️ Tutoriel vidéo :
S'abonner à mon canal :
:first-of-type Modifier le premier élément uniquement
Cette pseudo-classe permet de ne modifier que le premier élément de son type parmi un groupe d'éléments frères.
Nous allons maintenant voir des exemples concrets mais ici vous avez une aide très bien sur cette pseudoclasse.
La première chose que nous allons modifier est le premier élément d'un menu :
Normalement, ce que je fais quand je veux modifier quelque chose, c'est d'entrer dans l'inspecteur d'éléments de mon navigateur (bouton droit -> Inspecter) et de vérifier si l'élément à modifier a une classe ou un identifiant :
L'élément que je veux modifier a un identifiant spécifique donc je n'ai vraiment pas besoin d'utiliser des pseudo-classes.
Mais imaginez que vous l'ayez vu et que je ne sache pas qu'il a bien un identifiant 🙈
Je vais modifier cet élément comme si cet identifiant n'existait pas.
Pour utiliser les pseudo-classes, je dois ajouter la pseudo-classe précédée de deux-points :
#top-menu li:first-of-type {
margin-right: 140px;
}
Et le résultat est:
Comme nous pouvons le voir dans la capture d'écran ci-dessus, seule la marge droite est appliquée au premier élément.
:last-of-type Modifier le dernier élément uniquement
De la même manière que dans l'exemple précédent nous ne pouvons modifier que le dernier élément.
Cette fois, nous utiliserons :last-of-type de la manière suivante :
#top-menu li:last-of-type {
margin-right: 140px;
}
Et le résultat serait :
:nth-of-type Modifier l'élément ou les éléments que nous voulons
Cette pseudo-classe est très puissante car nous pouvons référencer n'importe quel élément spécifique que nous voulons ou créer des modèles pour plusieurs éléments à sélectionner.
Imaginons que j'ai besoin de modifier le deuxième élément de mon menu, pour cela nous utiliserions nth-of-type de la manière suivante :
#top-menu li:nth-of-type(2) {
margin-right: 140px;
}
Créez des modèles avec : nth-of-type sur des éléments pairs
Si au lieu de faire référence à un élément spécifique nous voulons faire référence à un élément tous les n éléments, nous le ferions comme ceci :
#top-menu li:nth-of-type(2n) {
margin-right: 140px;
}
Et le résultat serait d'appliquer une marge aux deuxième et quatrième éléments :
Créer des modèles avec : nth-of-type sur les éléments impairs
De la même manière, nous pouvons faire référence aux éléments impairs de la manière suivante :
#top-menu li:nth-of-type(2n+1) {
margin-right: 140px;
}
Et le résultat serait :
Ajouter des modifications CSS à WordPress
Nous avons apporté des modifications CSS à l'inspecteur d'éléments. Et c'est bien de le tester, mais dès que nous actualiserons la page, les modifications disparaîtront car ces modifications ne sont pas enregistrées sur le Web, mais dans notre propre navigateur.
Pour ajouter les modifications à WordPress, il existe de nombreuses façons, de la modification du fichier CSS de notre modèle à l'utilisation de l'interface WordPress elle-même.
Nous allons utiliser l'interface WordPress elle-même, pour cela nous allons dans le menu Personnaliser -> Ajouter du CSS supplémentaire :
On clique et on arrive à l'écran où il faut ajouter le CSS :
Bonus Track : Ajouter une pseudo-classe à un élément enfant
Comme nous l'avons vu, ces Pseudo-Classes permettent de modifier facilement des éléments frères, c'est-à-dire des éléments qui sont au même niveau.
Mais imaginons que nous voulions changer la couleur des éléments impairs de notre menu.
La couleur n'est pas définie dans l'élément de liste (li) mais dans l'élément de lien (a) qui se trouve à l'intérieur de l'élément de liste :
Si nous regardons l'inspecteur d'éléments :
Si on regarde bien, on voit qu'on ne pourrait pas créer le pattern de la manière suivante :
#top-menu li a:nth-of-type(2n+1) {
color: red;
}
Puisque chaque lien est dans un li différent, ils seraient tous le premier élément et ils changeraient tous de couleur :
Ce que nous devrions faire est d'appliquer le modèle avec la pseudo classe à l'élément li de la manière suivante :
#top-menu li:nth-of-type(2n+1) a {
color: red;
}
Résultant de ce que nous voulions vraiment:
Comme nous l'avons vu, ce n'est pas la fin du monde si nous n'avons pas d'identifiant ou de classe.
Grâce aux pseudoclasses, nous pouvons accéder à presque tous les éléments de notre HTML.
J'espère que ça vous a plu 😉