Les intégristes

Alors que les CSS Selectors Level 3 viennent de passer en statut Recommendation, un premier brouillon de CSS Selectors Level 4 a été publié hier par le W3C. Voici un aperçu de quelques sélecteurs que j’ai hâte de pouvoir utiliser ! Évidemment, tout ce qui est présenté ici est susceptible d’être modifié lors du processus de rédaction de cette nouvelle Recommendation.

Multiple negation pseudo-class

La pseudo-classe de négation était déjà disponible avec le Level 3, mais il est maintenant possible d’indiquer plusieurs négations.

Définition : E:not(s1, s2)

Avant :

p{ /* on définit un style */ }
p.ma-classe-1, p.ma-classe-2{ /* …puis on l’annule */ }

Après :

p:not(.ma-classe-1, .ma-classe-2){}

Matches-any pseudo-class

Cette pseudo-classe permet de restreindre une sélection sur un élément, mais avec plusieurs possibilités.

Définition : E:matches(s1, s2)

Avant :

body div p.ma-classe-1,
body div p.ma-classe-2{}

Après :

body div p:matches(.ma-classe-1, .ma-classe-2){}

Local link pseudo-class

Cette pseudo-classe permet de cibler les liens pointant sur le document lui-même (<a href="#mon-element"></a>) avec :local-link, et les liens qui pointent sur le même domaine (avec le :local-link(0)). Pratique non ?

Définition : E:local-link, E:local-link(0)

Reference combinator

Définition : E /foo/ F

Permet de cibler un élément F dont l’attribut id correspond à l’attribut foo. L’intérêt n’est pas évident au premier abord, mais avec l’exemple ça va beaucoup mieux :

label:matches(:hover, :focus) /for/ input{}

On voit ici qu’il est possible d’agir sur l’élément input dont l’attribut id correspond à l’attribut for d’un élément label qui a reçu le focus ou été survolé, et ceci peu importe son emplacement dans le document.

Determining the subject of a selector

Et enfin pour finir, le Messie, celui qu’on attendait tous, le sélecteur de sujet ! Il suffit de préfixer un composant du sélecteur par le signe dollar ($) pour qu’il devienne l’élément ciblé.

Il est donc possible d’obtenir un sélecteur de parent, en le combinant avec le sélecteur d’enfant direct :

$section > h1{
  /* C’est l’élément section qui sera stylé ici */
}

Et d’une manière plus générale, nous pourrons déplacer le sujet n’importe où dans un sélecteur, et ça c’est merveilleux.

L’ajout d’un tel sélecteur a longtemps été repoussé pour des raisons de performances. Je n’ai pas connaissance des discussions qui ont eu lieu sur le sujet, mais si vous en savez plus, n’hésitez pas à l’indiquer dans les commentaires. À suivre de très près !

Mise à jour : Daniel Glazman parle du sélecteur de sujet sur son blog.