not() et matches()

Image non disponible

Ce sont certainement deux de mes nouveautés préférées. Vous avez peut-être déjà entendu parler du sélecteur :not(), qui a été introduit en CSS3. En revanche, le sélecteur :matches() devrait être nouveau pour vous.

:not()

E:not(s1, s2) Un élément E qui ne correspond ni au sélecteur composé s1, ni à s2.

La spécification CSS4 précise que :not() peut être utilisé aussi bien avec des sélecteurs que des pseudoclasses. Malgré tout, il ne fonctionnera pas avec :after ou :before, mais tous les autres seront acceptés. Si vous souhaitez par exemple sélectionner tous les éléments sauf les liens, vous pouvez faire ceci :

 
Sélectionnez
*|*:not(:link):not(:visited){
    /* Règles CSS */
}

Utile non ? Sur des projets importants, cela va certainement permettre de réduire le code. Ce qui sera aussi le cas de :matches().

*|* est une règle générale de type « s'applique à tout ». Ce sélecteur permet d'appliquer le CSS à tous les éléments de la page.

:matches()

E:matches(s1, s2) Un élément E qui correspond au sélecteur composé s1 et / ou s2.

:matches() peut s'appliquer à n'importe quelle pseudoclasse. Vous ne pouvez pas combiner :matches() et :not(). La spécification précise clairement que vous ne pouvez pas faire :matches(:not( ... )). De toute façon, ça n'aurait pas beaucoup de sens ! Voici un exemple qui permet de définir des règles CSS à tous les éléments survolés par la souris :

 
Sélectionnez
*|*:matches(:hover){
    /* Règles CSS */
}

Nouveaux sélecteurs directs

Image non disponible

Certains nouveaux sélecteurs sont ajoutés dans la spécification, ils ont tous leur utilité.

Sélection par référence

E /foo/ F Un élément F relié à un élément E dont l'id est foo.

Celui-ci est un peu compliqué et il m'a fallu du temps pour bien le comprendre. Imaginons par exemple que vous ayez ceci dans un formulaire :

 
Sélectionnez
<label for="nom">Votre nom</label>
<input id="nom" type="text" />

L'attribut for, par définition, doit correspondre à la valeur de l'id du champ correspondant. Les deux éléments sont donc connectés. Cette pseudoclasse vous permet de cibler des éléments connectés selon ce modèle. Par exemple, si vous souhaitez cibler la balise input lorsque la souris survole la balise label, vous pouvez faire ceci :

 
Sélectionnez
label:hover /foo/ input{
    /* Règles CSS */
}

J'imagine que cela pourra s'appliquer à d'autres éléments connectés.

Cibler les éléments parents (en CSS !)

E! > F Un élément E parent d'un élément F.

Celui-ci fait partie de mes favoris ! Jusqu'à présent, en CSS, le dernier élément écrit est celui que vous ciblez, par exemple dans :

 
Sélectionnez
div a{

}

Si vous avez déjà utilisé les CSS, vous devez savoir que nous ciblons les balises <a> présentes dans des balises <div>. Avec ce sélecteur, vous pouvez utiliser la même syntaxe, mais en ciblant la balise <div>. Cela peut toutefois vous sembler inutile. Néanmoins, si vous vouliez faire cela, il suffirait d'enlever le a et cela ciblerait la balise <div>. En fait, cela permet de faire ce dont les développeurs rêvent depuis longtemps en CSS : sélectionner des éléments en fonction d'un descendant. Vous auriez pu tenter une syntaxe telle que :

 
Sélectionnez
ul li:hover < ul{
    /* Récupérer l'élément parent ; cela ne fonctionne pas */
}

Avec CSS4, vous pourrez faire ceci :

 
Sélectionnez
ul! li:hover{
    /* C'est la balise ul qui est sélectionnée */
}

C'est le parent qui est sélectionné lorsqu'un élément de liste est survolé. Il s'agit d'une avancée majeure par rapport à ce que permet de faire CSS, et les possibilités offertes sont immenses.

Dans certains documents, c'est le signe $ qui est utilisé à la place du point d'exclamation : $E > F.

Casse des caractères

E[foo="bar" i] Un élément E dont l'attribut foo correspond à bar, quelle que soit la casse de caractères.

C'est moins intéressant que de sélectionner les classes parentes, mais si vous avez un code tel que :

 
Sélectionnez
<pre>
    <div class="foo"></div>
    <div class="Foo"></div>
    <div class="fOO"></div>
<pre>

(quelle qu'en soit la raison) et que vous souhaitiez cibler toutes les <div>, vous pourriez utiliser ce sélecteur pour ça. Tout ce que vous auriez à faire serait :

 
Sélectionnez
div[class='foo' i]{
    /* Règles CSS */
}

Le petit i signifie que la casse ne doit pas être prise en compte !

Encore plus de pseudoclasses

Image non disponible

Une bonne partie de celles-ci se rapportent aux colonnes et au nouveau sélecteur match().

Les pseudoclasses de type match

E:nth-match(n) Les éléments E ne éléments du type.
E:nth-last-match(n) Les éléments E ne éléments du type en comptant à partir du dernier.

Comme vous l'avez peut-être remarqué, le sélecteur :match() n'est pas, en soi, particulièrement intéressant et utile. CSS4 a donc ajouté quelques sélecteurs de type nth-type. Vous pouvez ainsi sélectionner un certain nombre d'occurrences. Vous pouvez par exemple avoir envie de récupérer les quatrièmes éléments de rang d'une sélection. Pour cela, vous pouvez utiliser div:nth-match(4n). Si au contraire seul le quatrième élément vous intéresse, alors la syntaxe sera nth-match(4). L'autre possibilité est nth-last-match() qui, au lieu de compter à partir du début de la page, commencera le compte depuis la fin.

Colonnes

E:column(selecteur) Un élément E qui représente une cellule de grille ou de table appartenant à une colonne correspondant à selecteur.
E:nth-column(n) Un élément E représentant une cellule appartenant à la colonne n d'une grille ou d'une table.
E:nth-last-column(n) Un élément E représentant une cellule appartenant à la colonne n d'une grille ou d'une table en partant de la dernière.

Les colonnes ne servent plus uniquement pour les tables ! En essayant de finaliser la spécification pour CSS3, le W3C a introduit un certain nombre de sélecteurs de colonnes, en particulier pour les grilles. Nous avons déjà évoqué ce sujet dans ce billet. Le sélecteur :column(selecteur) permet de sélectionner une colonne à partir de certaines caractéristiques, alors que le sélecteur :nth-column(n) permet d'en sélectionner en fonction de leur rang, et que :nth-last-column(n) en sélectionne en fonction de leur rang mais en partant de la fin.

Langages et liens

Image non disponible
E:lang(fr, en) Un élément E dont la langue est "fr" ou "en" (différents éléments permettent de déterminer la langue utilisée).
E:local-link Un élément E source d'un hyperlien dont la cible est le document courant.
E:local-link(0) Un élément E source d'un hyperlien dont la cible est le domaine courant.

L'élément de langue est susceptible (il me semble) d'être utilisé depuis CSS2, il ne s'agit donc pas d'une réelle nouveauté. On utilise ici un élément sémantique au travers du document pour appliquer des styles à des éléments désignés comme relevant d'une langue spécifique. Cela peut être utile si vous avez un site multilingue ou international.

Les sélecteurs de type :local-link seront quant à eux très utiles, en particulier en ce qui concerne la navigation. Jusqu'à présent, nous devions utiliser des classes spécifiques à appliquer pour les liens internes, qu'il faut ajouter soit en PHP soit manuellement. Avec :local-link, nous pourrons cibler directement les liens internes à la page en cours. Si vous souhaitez par exemple appliquer des styles à un menu contenant des ancres, il vous suffit de faire :

 
Sélectionnez
#nav:local-link{
    box-shadow : 0px 0px 10px rgba(0,0,0,0.4) ;
}

Plutôt simple, non ? Mais on peut aller un peu plus loin en précisant l'arborescence de l'URL. Par exemple :

 
Sélectionnez
#nav:local-link(0){

}

va cibler tous les liens vers la racine du site (dans notre cas, http://inserthtml.developpez.com/).

Si votre URL est par exemple http://www.inserthtml.com/2011/03/25/name/, alors

  • :local-link(0) va cibler les URL vers http://www.inserthtml.com/ ;
  • :local-link(1) va cibler les URL vers http://www.inserthtml.com/2011/ ;
  • :local-link(2) va cibler les URL vers http://www.inserthtml.com/2011/03/ ;
  • :local-link(3) va cibler les URL vers http://www.inserthtml.com/2011/03/25/ ;
  • :local-link(4) va cibler les URL vers http://www.inserthtml.com/2011/03/25/name/.

Maîtriser le temps !

Image non disponible
E:current Un élément E présent dans un contexte temporel.
E:current(s) Un élément E qui est le plus proche élément :current correspondant au sélecteur s.
E:past Un élément E passé dans un contexte temporel.
E:future Un élément E futur dans un contexte temporel.

Aussi prometteur que cela puisse sembler, CSS ne vous permet pas actuellement de manipuler le continuum espace/temps de quelque façon que ce soit (faudra-t-il attendre CSS5 ?). Ce que ces éléments permettent est de gérer les styles en temps réel. Par exemple, mettre en valeur un paragraphe en cours de lecture (en utilisant la spécification vocale de CSS3), ou de donner plus de possibilités de gestion de vidéo en HTML5 (comme les sous-titres) et peut-être plus lorsque les spécifications CSS4 seront finalisées.

Interface utilisateur (comprenant CSS3UI)

Image non disponible
E:indeterminate Un élément E dans un état indéterminé (ni sélectionné ni non sélectionné).
E:default Un élément E ayant sa valeur par défaut.
E:in-range et E:out-of-range Un élément E dans ou hors d'un intervalle.
E:required et E:optional Un élément E requis ou optionnel.
E:read-only et E:read-write Un élément E pouvant, ou non, être édité.

Il s'agit à chaque fois d'éléments d'interface utilisateur. Il n'y a pas besoin de beaucoup plus d'explications. Ils ne s'appliquent essentiellement, pour l'heure, qu'aux éléments de formulaires, en se basant sur leur état. Mais à l'avenir de nouveaux éléments seront peut-être aussi concernés, ce qui rendra ces sélecteurs encore plus utiles. Ils sont apparus avec CSS3, mais on peut imaginer que CSS4 en ajoutera encore d'autres.

Conclusion et remerciements

La spécification CSS4, dans son état actuel, apporte déjà beaucoup de ce dont les développeurs Web ont rêvé depuis longtemps. Nous ne pouvons qu'espérer que les navigateurs ne tarderont pas à implémenter ces nouveautés au plus vite (en particulier, le ciblage des éléments parents). Personnellement, je suis impatient que cela arrive. Et vous, qu'en pensez-vous ?

Cet article a été traduit avec l'aimable autorisation de inserthtml. L'article original : The Brand New CSS4 Selectors Specification peut être vu sur le site de inserthtml.

Nous tenons à remercier bifconsult, dourouc05, jacques_jean et ClaudeLELOUP pour leur relecture attentive de cet article.