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’ ::
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;
}
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;
}
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.
Une réponse