Les 30 Sélecteurs CSS à connaître pour vos Web Designs

3ème partie

Les 10 derniers sélecteurs CSS

Aller, on continue pour les 10 derniers sélecteurs que vous devez connaître et retenir.

21 - X::pseudoElement

p::first-line {
font-weight: bold;
font-size: 1.4em;
}

On peut utiliser un pseudo-élément (représenté par ::) pour cibler une partie seulement d’un élément, par exemple la première ligne d’un paragraphe ou la première lettre uniquement.

Attention : Un pseudo-élément est composé de deux symboles ‘deux points’ ::

Cibler la première lettre d’un paragraphe
p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px
}
compatibilité
Firefox
Chrome
Opera
Safari
IE6+

22 - X:nth-child(n)

li:nth-child(2) {

   color: red;

}

Finie l’époque où l’on ne pouvait pas cibler un élément spécifique dans une hiérarchie. Le pseudo-élément nth-child nous en donne maintenant la possibilité. Attention : il prend comme argument un nombre entier dans un domaine qui démarre à 1 et non à 0. Donc pour cibler le deuxième élément il faut utiliser : li:nth-child(2)

compatibilité
Firefox 3.5+
Chrome
Opera
Safari
IE9+

23 - X:nth-last-child(n)

li:nth-last-child(2) {

color: blue;

}

Que se passe-t’il si vous avez une grande liste d’éléments dans une liste non-ordonnée et que vous souhaitiez cibler les 5 derniers éléments ? Et bien au lieu d’utiliser li:nth-child(250) par exemple, vous pouvez utiliser la pseudo-classe nth-last-child.

Cette technique agit de la même manière que la précédente, bien que la différence soit qu’elle démarre en sens inverse à partir de la fin.

compatibilité
Firefox 3.5+
Chrome
Opera
Safari
IE9+

24 - X:nth-of-type(n)

ul:nth-of-type(3) {

   border: 1px solid black;

}

Parfois il est préférable de sélectionner un élément par son Type type et non par le fait qu’il soit enfant d’un autre élément child

Prenons l’exemple d’une page qui contient 5 listes non ordonnées ul.

On souhaite styliser la troisième liste mais nous n’avons pas d’identifiant unique pour la cibler. Nous pourrons alors utiliser le pseudo-élément nth-of-type(3). Nous ciblerons ainsi le troisième élément de type ul.

compatibilité
Firefox 3.5+
Chrome
Opera
Safari
IE9+

25 - X:nth-last-of-type(n)

ul:nth-last-of-type(3) {

   border: 1px solid black;

}

Avec ce sélecteur, pour être consistent, nous pouvons également l’utiliser pour parcourir la liste à partir de la fin et ainsi cibler l’élément du type sélectionné.

compatibilité
Firefox 3.5+
Chrome
Opera
Safari
IE9+

26 - X:first-child

ul li:first-child {

   border-top:none;

}

Cette pseudo classe structurelle va nous permettre de seulement cibler le premier enfant de l’élément parent. On l’utilise notamment pour enlever les bordures du premier et du dernier élément d’une liste.Par exemple, chaque rangée de la liste possède une propriété border-top et border-bottom. Cela fonctionnera mieux si nous l’enlevons à la première et à la dernière rangée.La plupart des designers utilisent les directives first et last, mais vous pouvez également utiliser cette directive.
compatibilité
Firefox
Chrome
Opera
Safari
IE7+

27 - X:last-child

ul > li:last-child {
   color: green;
}

Ce sélecteur est le sélecteur opposé du précédent. Il cible le dernier élément de l’élément parent.

compatibilité
Firefox
Chrome
Opera
Safari
IE9+

28 - X:only-child

div p:only-child {
   color: green;
}

Voici un sélecteur que vous n’utiliserez probablement pas souvent. Mais il a le mérite d’exister.Il sert à cibler les éléments qui n’ont qu’un seul descendant.
compatibilité
Firefox
Chrome
Opera
Safari
IE9+

29 - X:only-of-type

li:only-of-type {
    font-weight: bold;
}

Cette pseudo-classe est intéressante. Elle sert à cibler les éléments qui n’ont pas d’enfants. Par exemple pour cibler tous les ul qui n’ont qu’un seul élément :

ul > li:only-of-type {
   font-weight : bold;
}

compatibilité
Firefox 3.5+
Chrome
Opera
Safari
IE9+

30 - X:first-of-type

ul:first-of-type > li:th-child(2) {
    color : blue;
}

Ce sélecteur peut se traduire ainsi : Trouve la première liste non ordonnée sur la page, puis cible seulement les descendants immédiats qui sont des éléments de liste. Enfin, ne sélectionne que le deuxième élément.

compatibilité
Firefox 3.5+
Chrome
Opera
Safari
IE9+

conclusion

Nous voici au terme de ces articles dédiés aux sélecteurs CSS les plus importants. J’espère que vous aurez envie de les découvrir, de les essayer et de vous impliquer encore plus dans le monde du CSS et du HTML. N’oubliez pas que quelque soit le moteur que vous utilisez, de wordPress à Prestashop, il est fondamental de comprendre le fonctionnement du CSS ne serait-est-ce que pour adapter, modifier et personnaliser vos Web designs.

Et si vous avez apprécié cette série d’articles, vous pouvez les recommander à vos amis.

Partager cet article

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Partager sur whatsapp
WhatsApp

Une réponse

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *