Sélecteurs CSS

Ce billet date de plusieurs années, ses informations peuvent être devenues obsolètes.

L'article Quantity Queries for CSS met en lumière certains nouveaux sélecteurs CSS. La technique utilisée ressemble un peu à une émulation de flexbox.

La règle finale est un subtil mélange de pseudo-classe (:nth-last-child), de combinateur (~) et de sélecteur (li) :

li:nth-last-child(n+6),
li:nth-last-child(n+6) ~ li {
    /* properties here */
}

Voici l'explication :

  • li:nth-last-child(n+6) : cible parmi les nœud frères de type li ceux dont les index (les index commencent à 1) en partant de la fin du parent correspondent au résultat de la formule n+6 (soit 6, 7, 8, 9 etc.)
  • li:nth-last-child(n+6) ~ li : l'ajout du combinateur d'adjacence indirecte (~) permet ici de sélectionner tous les éléments li précédés par les éléments ciblés par li:nth-last-child(n+6)

C'est malin et ça permet effectivement de faire des sélections sur la base de quantités d'éléments (ici la règle est appliquée si on a 6 éléments au moins).

J'avais détaillé la formule (an+b) dans mes notes sur CSS3. Je ne suis pas fan de sa syntaxe mais elle fait le job :)

De plus en plus de sélecteurs

On disposait d'une quinzaine de sélecteurs en CSS 2.1.

On est passé à plus d'une quarantaine en CSS niveau 3.

On dépassera probablement les 60 en CSS niveau 4.

Voici largement de quoi complexifier l'écriture, la lecture et la maintenance des feuilles de style ;)

Performance des sélecteurs

Ce commentaire de Dave Hyatt m'avait marqué en 2008 :

The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers.

Depuis de l'eau semble avoir coulé sous les ponts :

Used in moderation pretty much everything will perform just fine from the style matching perspective.

Et si vous êtes motivés vous pouvez lire CSS performance revisited dont les conclusions sont intéressantes :

  • sweating over the selectors used in modern browsers is futile; most selection methods are now so fast it’s really not worth spending much time over
  • excessive unused styles are likely to cost more, performance wise, than any selectors you chose
  • the battle for high performing CSS will not be won in the selectors used, it will be won with the judicious use of property and values

Cela dit si vous chargez une page vraiment grosse, comme au hasard la version One-Page des spécifications HTML du WHATWG, vous allez voir comme votre navigateur va ramer !

Avant Passage par partage d'objet en Python et JavaScript Après Voir plus de warnings dans la console Django

Tag Kemar Joint