Les 30 Sélecteurs CSS à Absolument Connaître

() translation by (you can also view the original English article)

Vous connaissez les sélecteurs de base - id, class et descendant - et vous vous dites que c'est déjà bien suffisant ? Si c'est le cas, sachez que vous vous interdisez d'accéder à un niveau de flexibilité insoupçonné. Même si beaucoup des sélecteurs mentionnés dans cet article appartiennent aux spécificités CSS3 et ne sont donc disponibles que dans les navigateurs modernes, ne passez pas à côté et essayez de les mémoriser.

1. *


* {
 margin: 0;
 padding: 0;
}

Commençons par les plus évidents, pour les débutants, avant de passer aux sélecteurs plus avancés.

L'astérisque cible tous les éléments de la page. Beaucoup de développeurs utilisent cette astuce pour remettre à zéro les margess et les espacements. C'est parfaitement indiqué pour des tests rapides mais je vous recommande de ne jamais recourir à cette méthode dans votre code en production : cela sollicite trop lourdement le navigateur et ça n'est pas indispensable.

Le symbole * peut aussi être utilisé avec des sélecteurs d'enfants.

1
2	#container * {
3	border: 1px solid black;
4	}

Ceci cible tous les éléments enfants de la div #container. Là encore, essayez d'utiliser cette technique le moins possible, voire pas du tout.

Voir la démo

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

2. #X


#container {
 width: 960px;
 margin: auto;
}

L'utilisation du symbole dièse comme sélecteur nous permet de cibler un élément par son id. Ce sélecteur d'id est probablement celui qui est le plus couramment utilisé mais il doit l'être avec quelques précautions.

Demandez-vous : est-ce que j'ai absolument besoin d'appliquer un id à cet élément pour le cibler ?

Les sélecteurs d'id sont en effet très rigides et ne permettent pas une réutilisation. Si possible, essayez d'utiliser d'abord un nom de balise, un des nouveaux éléments HTML5, ou même une pseudo-classe.

Voir la démo

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

3. .X

1
2	.error {
3	color: red;
4	}

Ceci est un sélecteur de classe. La principale différence entre les ids et les classes est que ces dernières vous permettent de cibler plusieurs éléments. Utilisez des classes quand vous souhaitez que votre mise en forme s'applique à un groupe d'éléments. Alternativement, vous pouvez donc recourir aux ids, un peu comme on chercherait une aiguille dans une botte de foin, et mettre en forme l'élément spécifique ainsi ciblé, et lui seul.

Voir la démo

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

4. X Y

1
2	li a {
3	text-decoration: none;
4	}

Le quatrième sélecteur le plus répandu est le sélecteur descendant. C'est lui que vous utilisez quand vous avez besoin d'être plus spécifique avec vos sélecteurs. Par exemple, comment faire pour cibler non pas toutes les balises d'ancres mais seulement celles qui sont comprises dans une liste non ordonnée ? C'est typiquement le cas où vous ferez appel à un sélecteur descendant.

Astuce pro - Si votre sélecteur ressemble à quelque chose comme X Y Z A B.error, c'est que vous vous y êtes mal pris. Demandez-vous toujours s'il est vraiment nécessaire de recourir à une syntaxe aussi lourde.

Voir la démo

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

5. X

1
2	a { color: red; }
3	ul { margin-left: 0; }

Imaginons que vous vouliez cibler tous les éléments d'une page, non pas selon leur id ou leur class mais selon leur type ? Faites simple et utilisez un sélecteur de type. Par exemple, si vous devez cibler toutes les listes non ordonnées, utilisez simplement ul {}.

Voir la démo

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

6. X:visited et X:link

1
2	a:link { color: red; }
3	a:visted { color: purple; }

La pseudo-classe :link est utilisée pour cibler toutes les balises d'ancres qui ne sont pas encore cliquées.

Alternativement, la pseudo-classe :visited permet, comme vous l'aurez deviné, d'appliquer une mise en forme spécifique aux seules balises d'ancres de la page qui ont été cliquées ou visitées.

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

7. X + Y

1
2	ul + p {
3	color: red;
4	}

On appelle ceci un sélecteur adjacent. Il permet de ne sélectionner que l'élément qui est immédiatement précédé par le premier élément ciblé. Ici, par exemple, seul le premier paragraphe après chaque ul comprendra du texte de couleur rouge.

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

8. X > Y

1
2	div#container > ul {
3	border: 1px solid black;
4	}

La différence entre le X Y standard et X > Y est que ce dernier ne sélectionnera que des enfants directs. Par exemple, soit le balisage suivant :

1
2	<div id="container">
3	<ul>
4	<li> List Item
5	<ul>
6	<li> Child </li>
7	</ul>
8	</li>
9	<li> List Item </li>
10	<li> List Item </li>
11	<li> List Item </li>
12	</ul>
13	</div>

Le sélecteur #container > ul ne ciblera que les uls qui sont enfants directs de la div avec l'id container. A l'inverse, il ne ciblera pas, par exemple, le ul qui est enfant du premier li.

Pour cette raison, l'utilisation de ce combinateur d'enfant apporte de vrais bénéfices en termes de performance. En fait, il est même particulièrement recommandé de l'utiliser quand on a recours à des moteurs de sélecteurs CSS basé sur du JavaScript.

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

9. X ~ Y

1
2	ul ~ p {
3	color: red;
4	}

Ce combinateur de frères est proche de X + Y mais il est toutefois moins strict. Alors qu'un sélecteur adjacent (ul + p) ne cible que le premier élément immédiatement précédé du premier sélecteur, celui-ci a une portée plus générale. Il sélectionne en effet, si l'on prend l'exemple ci-dessus, n'importe quel élément p, du moment qu'ils suivent un ul.

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

10. X[title]

1
2	a[title] {
3	color: green;
4	}

Ce sélecteur d'attributs, comme on l'appelle, ne ciblera, dans l'exemple ci-dessus, que les balises d'ancres qui ont un attribut title. Cette mise en forme spécifique ne sera donc pas appliquée aux autres balises d'ancres. Oui, mais comment faire si on veut être plus spécifique ? Et bien...

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

11. X[href="foo"]

1
2	a[href="http://net.tutsplus.com"] {
3	color: #1f6053; /* vert nettuts */
4	}

L'extrait de code ci-dessus appliquera une mise en forme à toutes les balises d'ancres qui contiennent un lien vers http://net.tutsplus.com ; elles prendront ainsi la couleur verte associée à notre marque. Toutes les autres balises d'ancres resteront inchangées.

Notez bien que la valeur est encadrée par des guillemets. Ne les oubliez pas non plus quand vous utilisez un moteur de sélecteur CSS basé sur du JavaScript. A chaque fois que c'est possible, utilisez les sélecteurs CSS3 plutôt que de recourir à des méthodes non officielles.

Cela fonctionne plutôt bien mais l'ensemble reste rigide. Imaginons que le lien dirige bien vers Nettuts+, mais que, par exemple, le chemin est nettuts.com plutôt que l'url complète ? Dans ces cas précis, il nous faut recourir à une syntaxe d'expressions régulières.

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

12. X[href*="nettuts"]

1
2	a[href*="tuts"] {
3	color: #1f6053; /* vert nettuts */
4	}

Et voilà. Exactement ce que nous voulions. L'étoile indique que la valeur qui suit doit apparaître quelque part dans la valeur de l'attribut. De cette façon, sont compris aussi bien nettuts.com que net.tutsplus.com, et même tutsplus.com.

Gardez bien à l'esprit que c'est une déclaration plutôt permissive. Que se passerait-il si la balise d'ancre pointait vers un site n'appartenant pas à Envato mais avec la chaîne tuts dans son url ? Quand vous avez besoin d'être plus spécifique, utilisez ^ et &dollar; pour référencer, respectivement, le début et la fin d'une chaîne.

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

13. X[href^="http"]


a[href^="http"] {
 background: url(path/to/external/icon.png) no-repeat;
 padding-left: 10px;
}

Vous vous êtes déjà demandé comment certains sites Web sont capables d'afficher une petite icône à côté de liens externes ? Je suis sûr que vous en avez déjà croisé quelques-uns ; ils sont là pour vous rappeler discrètement que le lien concerné vous mènera à un site complètement différent.

C'est du gâteau avec le symbole du caret. Il est le plus souvent utilisé dans les expressions régulières pour référencer le début d'une chaîne. Si, par exemple, vous voulez cibler toutes les balises d'ancres qui ont un href commençant par http, vous pouvez utiliser un bout de code proche de celui que vous pouvez voir ci-dessus.

Notez que nous ne cherchons pas http:// ; ce n'est pas nécessaire et, par ailleurs, ça ne prendrait pas en compte les urls commençant par https://.

Maintenant, imaginons que nous voulions mettre en forme toutes les ancres qui contiennent un lien vers, disons, une photo ? Dans ces cas-là, cherchons la fin de la chaîne.

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

14. X[href$=".jpg"]

1
2	a[href$=".jpg"] {
3	color: red;
4	}

Là encore, nous utilisons un symbole des expressions régulières, $, pour identifier la fin d'une chaîne. Ici, nous cherchons toutes les ancres qui contiennent un lien vers une image -- ou, au moins, une url qui finisse par .jpg. Gardez bien à l'esprit que cela ne fonctionnera évidemment pas pour les gifs ni les pngs.

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

15. X[data-*="foo"]

1
2	a[data-filetype="image"] {
3	color: red;
4	}

Reportez-vous au point 8 de cet article comment prendre en compte tous les types d'images, png, jpeg,jpg, gif ? Et bien, nous pourrions par exemple créer des sélecteurs multiples :

1
2	a[href$=".jpg"],
3	a[href$=".jpeg"],
4	a[href$=".png"],
5	a[href$=".gif"] {
6	color: red;
7	}

Mais c'est un peu lourd à mettre en place et pas vraiment efficace. Une autre solution possible consisterait à utiliser des attributs personnalisés. Et si nous ajoutions, par exemple, notre propre attribut data-filetype à chaque ancre qui pointe vers une image ?

1
2	<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Ensuite, grâce à ce marquage, nous pouvons utiliser un sélecteur d'attribut standard pour ne cibler que ces ancres.

1
2	a[data-filetype="image"] {
3	color: red;
4	}

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

16. X[foo~="bar"]


 a[data-info~="external"] {
 color: red;
}

a[data-info~="image"] {
 border: 1px solid black;
}

Celui-ci est spécial et impressionnera vos amis. Peu de personnes connaissent cette astuce. Le symbole tilde (~) nous permet de cibler un attribut qui a une liste de valeurs séparées par un espace.

Selon le principe d'attribut personnalisé vu ci-dessus au point 15, nous pouvons créer l'attribut data-info, qui contiendrait par exemple une liste de tout ce que nous souhaitons prendre en note, en veillant simplement à ce que les éléments soient séparés par des espaces. Ici, nous noterons tous les liens extérieurs et les liens vers des images - juste pour la démonstration.

1
2	"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Ce balisage en place, nous pouvons maintenant cibler toutes les balises qui ont une de ces valeurs, en utilisant l'astuce du sélecteur d'attributs ~.


/* Cible l'attribut data-info qui contient la valeur "external" */
a[data-info~="external"] {
 color: red;
}

/* Et qui contient la valeur "image" */
a[data-info~="image"] {
border: 1px solid black;
}

Plutôt ingénieux, non ?

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

17. X:checked

1
2	input[type=radio]:checked {
3	border: 1px solid black;
4	}

Cette pseudo-classe ne ciblera un élément d'interface utilisateur que s'il a été coché (checked) - comme un bouton radio ou une case à cocher. C'est aussi simple que ça.

Voir la démo

Compatibilité

IE9+
Firefox
Chrome
Safari
Opera

18. X:after

Les pseudo-classes before et after sont méchamment puissantes ! Tous les jours ou presque, on trouve de nouvelles manières, souvent très créatives, d'utiliser à plein leur énorme potentiel. Elles servent tout simplement à générer du contenu autour de l'élément sélectionné.

Beaucoup d'entre nous les ont rencontrées pour la première fois quand ils ont dû utiliser le hack "clear-fix.


.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
  }

.clearfix {
 *display: inline-block;
 _height: 1%;
}

Ce hack utilise la pseudo-classe :after pour ajouter un espace après l'élément puis le rend invisible. Pensez à garder cette ingénieuse astuce dans un coin de votre boîte à outils, surtout pour les cas où la méthode overflow: hidden; n'est pas possible.

Pour une autre utilisation de ces pseudo-classes, reportez-vous à mes petits conseils pour créer des ombres.

Techniquement, selon les spécifications de sélecteurs CSS3, vous devriez utiliser la syntaxe de pseudo-élément du double "deux-points" ::. Concrètement, pour des raisons de compatibilité, l'agent utilisateur accepte également un unique "deux-points". En fait, il est même plus malin d'utiliser cet unique "deux-points" aujourd'hui.

Compatibilité

IE8+
Firefox
Chrome
Safari
Opera

19. X:hover

1
2	div:hover {
3	background: #e3e3e3;
4	}

Allez, quand même... Vous le connaissez, celui-là. Le terme officiel pour le désigner est pseudo-classe d'action utilisateur. Une expression un peu déroutante mais en fait, c'est vraiment très simple. Vous voulez appliquer une mise en forme spécifique quand un utilisateur survole un élément ? Avec ça, considérez que le boulot est fait !

Gardez bien en tête que les versions les plus anciennes d'Internet Explorer ne réagissent pas quand la pseudo-classe :hover est appliquée à autre chose qu'une balise d'ancre.

Le plus souvent, vous utiliserez ce sélecteur quand vous voudrez appliquer, par exemple, un border-bottom à des balises d'ancres, au survol.

1
2	a:hover {
3	border-bottom: 1px solid black;
4	}

Astuce pro - border-bottom: 1px solid black; rend mieux que text-decoration: underline;.

Compatibilité

IE6+ (Dans IE6, :hover doit être appliqué à un élément ancre)
Firefox
Chrome
Safari
Opera

20. X:not(selector)

1
2	div:not(#container) {
3	color: blue;
4	}

La pseudo-classe negation est particulièrement utile. Imaginons que je veuille sélectionner toutes les divs, sauf celle qui a l'id container. Le bout de code ci-dessus remplira cette fonction à merveille.

Imaginons encore que je veuille sélectionner tous les éléments de la page (pas conseillé) sauf les balises de paragraphes. Nous pourrions écrire :

1
2	*:not(p) {
3	color: green;
4	}

Voir la démo

Compatibilité

IE9+
Firefox
Chrome
Safari
Opera

21. X::pseudoElement


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

Nous pouvons utiliser des pseudo-éléments (identifiés par ::) pour mettre en forme des parties d'un élément, comme la première ligne ou la première lettre. N'oubliez pas qu'ils doivent être appliqués à des éléments de type block pour être pris en compte.

Un pseudo-élément est composé d'un double "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;
}

Ce bout de code est une abstraction qui va chercher tous les paragraphes de la page puis sous-cible seulement la première lettre de cet élément.

Cette technique est le plus souvent utilisée pour créer un effet "lettrine de journal" à la mise en forme de la première lettre d'un article.

Cibler la première ligne d'un paragraphe


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

De la même manière, le pseudo-élément ::first-line met en forme, comme on peut s'y attendre, la première ligne de l'élément, et elle seule.

"Pour assurer la compatibilité avec les feuilles de style existantes, les agents utilisateurs doivent aussi accepter l'ancienne notation de pseudo-éléments - sous la forme d'un unique "double-point" - qui a été introduite dans les niveaux 1 et 2 des CSS (à savoir, :first-line, :first-letter, :before et :after). Cette compatibilité n'est pas autorisée pour les nouveaux pseudo-éléments introduits dans cette spécification." - Source

Voir la démo

Compatibilité

IE6+
Firefox
Chrome
Safari
Opera

22. X:nth-child(n)

1
2	li:nth-child(3) {
3	color: red;
4	}

Vous vous rappelez de cette période où il était impossible de cibler des éléments spécifiques d'une liste ? La pseudo-classe nth-child est venue depuis à notre rescousse !

Notez bien que si nth-child accepte un nombre entier comme paramètre, il ne repose pas sur un système à base zéro. Ainsi, si vous voulez cibler le deuxième élément d'une liste, utilisez li:nth-child(2).

On peut même s'en servir pour sélectionner un ensemble d'enfants au nombre variable. Par exemple, nous pouvons écrire li:nth-child(4n) pour sélectionner tous les quatrièmes éléments d'une liste.

Voir la démo

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari

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

1
2	li:nth-last-child(2) {
3	color: red;
4	}

Imaginez que vous ayez une énorme liste d'éléments dans un ul et que vous vouliez accéder à, disons, l'avant-avant-avant dernier (!) élément ? Plutôt que d'écrire li:nth-child(397), vous pouvez utiliser la pseudo-classe nth-last-child.

Cette technique fonctionne de manière presque identique à celle du point 16 ci-dessus, à la seule différence qu'elle commence à la fin de la collection et "remonte" ensuite la liste et ses éléments.

Voir la démo

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari
Opera

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

1
2	ul:nth-of-type(3) {
3	border: 1px solid black;
4	}

Parfois, plutôt que de sélectionner un enfant, vous avez besoin de cibler selon le type d'élément.

Imaginez un balisage qui contienne cinq listes non ordonnées. Si vous ne vouliez mettre en forme que le troisième ul sans avoir à votre disposition un unique id auquel vous raccrocher, vous pourriez alors recourir à la pseudo-classe nth-of-type(n). Dans le bout de code ci-dessus, seul le troisième ul sera ainsi entouré d'une bordure noire.

Voir la démo

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari

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

1
2	ul:nth-last-of-type(3) {
3	border: 1px solid black;
4	}

Et, oui, pour rester cohérent, vous pouvez également utiliser nth-last-of-type pour commencer à la fin de la liste des sélecteurs et, là encore, "remonter" jusqu'à l'élément que vous souhaitez cibler.

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari
Opera

26. X:first-child

1
2	ul li:first-child {
3	border-top: none;
4	}

Cette pseudo-classe structurelle permet de cibler uniquement le premier enfant de l'élément parent. Cette technique est souvent utilisée pour enlever les bordures du premier et du dernier élément d'une liste.

Par exemple, imaginons que vous ayez une liste de lignes dont chacune a un border-top et un border-bottom. Et bien, avec cet arrangement, vous verrez que le premier et le dernier élément de cet ensemble auront l'air un peu curieux.

Beaucoup de designers appliquent les classes first et last pour remédier à ça. Alternativement, vous pouvez utiliser ces pseudo-classes.

Voir la démo

Compatibilité

IE7+
Firefox
Chrome
Safari
Opera

27. X:last-child

1
2	ul > li:last-child {
3	color: green;
4	}

Contraire de first-child, last-child cible le dernier élément du parent.

Exemple

Construisons un exemple tout simple pour montrer une utilisation possible de ces classes. Nous allons créer une liste d'éléments et la mettre en forme.

Markup

1
2	<ul>
3	<li> List Item </li>
4	<li> List Item </li>
5	<li> List Item </li>
6	</ul>

Rien de spécial ici ; juste une liste toute simple.

CSS


ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

Cette mise en forme va définir un fond, supprimer l'espacement par défaut du navigateur sur le ul et appliquer des bordures à chaque li pour donner un peu de profondeur à l'ensemble.

Pour donner de la profondeur à vos listes, appliquer à chaque li un border-bottom qui est d'une teinte légèrement plus foncée que la couleur de fond du li. Ensuite, appliquez un border-top légèrement plus clair.

Le seul problème, comme vous pouvez le voir sur l'image ci-dessus, est que la bordure va s'appliquer tout en haut et tout en bas de la liste non ordonnée - ce qui fait curieux. Utilisons les pseudo-classes :first-child et :last-child pour réparer la chose.


li:first-child {
  border-top: none;
}

li:last-child {
 border-bottom: none;
}

Et voilà, réparé !

Voir la démo

Compatibilité

IE9+
Firefox
Chrome
Safari
Opera

Et, oui, IE8 prend en charge :first-child... mais pas :last-child. Allez savoir.

28. X:only-child

1
2	div p:only-child {
3	color: red;
4	}

Pour être honnête, il y a peu de chances que vous utilisiez régulièrement la pseudo-classe only-child. Elle reste toutefois disponible, si l'occasion se présentait à vous d'y recourir.

Elle permet de cibler des éléments qui sont le seul enfant de leur parent. Par exemple, si on se réfère au code ci-dessus, seul le paragraphe qui est seul enfant de la div prendra la couleur rouge.

Soit le balisage suivant.


<div><p> Mon paragraphe ici. </p></div>

<div>
 <p> Deux paragraphes au total. </p>
 <p> Deux paragraphes au total. </p>
</div>

Ici, les paragraphes de la seconde div ne seront pas ciblés ; seul la première div le sera. Dès que vous affectez plus d'un enfant à un élément, la pseudo-classe only-child cesse d'être prise en compte.

Voir la démo

Compatibilité

IE9+
Firefox
Chrome
Safari
Opera

29. X:only-of-type

1
2	li:only-of-type {
3	font-weight: bold;
4	}

Cette pseudo-classe structurelle peut être utilisée astucieusement de plusieurs manières. Elle cible les éléments qui n'ont aucun frère au sein du conteneur parent. Prenons un exemple en ciblant tous les uls qui n'ont qu'un seul élément de liste.

Tout d'abord, demandez-vous comment vous atteindriez cet objectif. Vous pourriez recourir à ul li mais ça ciblerait tous les éléments de liste. La seule solution consiste à utiliser only-of-type.

1
2	ul > li:only-of-type {
3	font-weight: bold;
4	}

Voir la démo

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari
Opera

30. X:first-of-type

La pseudo-classe first-of-type vous permet de sélectionner les premiers frères d'un type donné.

Un test

Pour mieux comprendre, faisons un test. Copiez le balisage suivant dans votre éditeur de code :

1
2	<div>
3	<p> Mon paragraphe ici. </p>
4	<ul>
5	<li> Elément de liste 1 </li>
6	<li> Elément de liste 2 </li>
7	</ul>
8
9	<ul>
10	<li> Elément de liste 3 </li>
11	<li> Elément de liste 4 </li>
12	</ul>
13	</div>

Maintenant, sans lire la suite, essayez de trouver comment cibler "Elément de liste 2". Quand vous avez trouvé (... ou renoncé), reprenez la lecture.

Solution 1

Il y a plusieurs manières de résoudre ce test. Nous allons en voir quelques-uns. Commençons en utilisant first-of-type.

1
2	ul:first-of-type > li:nth-child(2) {
3	font-weight: bold;
4	}

Ce bout de code ne fait que dire : "trouve la première liste non ordonnée sur la page, puis trouve seulement les enfants immédiats qui sont des éléments de liste. Ensuite, filtre le résultat pour obtenir seulement le deuxième élément de liste de cet ensemble".

Solution 2

Une autre solution consiste à utiliser le sélecteur adjacent.

1
2	p + ul li:last-child {
3	font-weight: bold;
4	}

Dans ce scénario, nous trouvons le ul qui précède immédiatement la balise p puis nous trouvons le tout dernier enfant de l'élément.

Solution 3

Nous pouvons être aussi pervers ou joueurs que nous le souhaitons avec ces sélecteurs !

1
2	ul:first-of-type li:nth-last-child(1) {
3	font-weight: bold;
4	}

Cette fois-ci, nous attrapons le premier ul sur la page puis nous trouvons le tout premier élément de liste... mais en commençant par la fin ! :)

Voir la démo

Compatibilité

IE9+
Firefox 3.5+
Chrome
Safari
Opera

Conclusion

Si vous prenez encore en compte de vieux navigateurs comme Internet Explorer 6, il faudra être prudent quand vous déciderez d'utiliser ces sélecteurs beaucoup plus récents. Mais que cela ne vous empêche pas de les apprendre ; au contraire, les ignorer ne peut que vous desservir. Assurez-vous également de consulter ce lien pour une liste des compatibilités navigateurs. Alternativement, vous pouvez utiliser l'excellent script de Dean Edward, IE9.js pour une prise en charge de ces sélecteurs par les navigateurs les plus anciens.

Ensuite, si vous travaillez avec des bibliothèques JavaScript, comme le fameux jQuery, essayez toujours d'utiliser, si c'est possible, ces sélecteurs CSS3 natifs plutôt que les sélecteurs et/ou méthodes maison fournis par cette bibliothèque. Cela rendravotre code plus rapide car le moteur de sélecteur pourra alors utiliser le parsing natif du navigateur plutôt que le sien propre.

Merci de m'avoir lu. J'espère que vous avez glané une ou deux astuces !