Spécifications des nouveaux sélecteurs CSS4

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 :

*|*: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() 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 :

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

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 :

<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 :

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

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

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 :

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 :

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

Avec CSS4, vous pourrez faire ceci :

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.

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

<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 :

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

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

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.

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.