Sommaire
- Intro
- Attributes
- Logique & condition
- not, is, where…
Dans cette quatrième partie, nous allons aller un peu plus loin dans les pseudos classes.
Pour tout vous dire, ça fait ± 15 ans que je les réclame/attends! Je jubile.
:not()
:not() est le sélecteur par négation (negation selector). C’est une pseudo-classe fonctionnelle qui prend une liste de sélecteurs comme argument. Elle pointe un élément qui n’est pas représenté par l’argument.
Note : Dans la norme Selectors Level 3, seul un unique sélecteur était autorisé comme argument de :not().
:is(.wp-block-table,table) :is(caption, th, td) {
padding: .5rem
}
:is()
:is(), est une pseudo-class qui prend comme argument une liste de sélecteurs, et cible n’importe quel élément qui peut être sélectionné par l’un des sélecteurs de la liste.
C’est particulièrement utile pour décrire de nombreux sélecteurs de manière plus compacte et évite décrire manuellement toutes les combinaisons avec des sélecteurs séparés.
L’effet est similaire à du nesting dans Sass et autre CSS preprocesseurs.
Note : Les Pseudo-elements ne peuvent pas être représentés par cette pseudo-classe. Elles ne sont pas valides comme argument de :is() ou :not().
Exemple
:is(.wp-block-table,table) :is(caption, th, td) {
padding: .5rem
}
[Note warning] :is() et :where() ne sont pas très bien encore supportés par Chrome apparemment. [lnk https://caniuse.com/?search=%3Ais; https://caniuse.com/?search=%3Awhere()];
Les anciens navigateurs supportent cette fonction à travers :matches(), ou l’ancien préfixe — :any(). :any() fonctionne exactement de la même façon que :matches()/:is(), sauf qu’il requiert un vendor prefix et ne supportent pas de sélecteurs complexes.
:where()
Specificity-adjustment Pseudo-class
Contrairement à :is(), la spécificité de :where() est toujours nulle. Ceci est utile pour introduire des filtres dans un sélecteur tout en gardant les déclarations de style associées faciles à remplacer.
:HAS()
:has() est une pseudo-class par relation (relationnel pseudo-class). C’est une pseudo-classe fonctionnelle qui prend une liste de sélecteurs comme argument. Elle représente un élément si l’un des sélecteurs relatifs correspond à au moins un élément lorsqu’il est ancré par rapport à cet élément.
Note: Les pseudo-éléments sont généralement exclus de :has() car nombre d’entre eux existent de manière conditionnelle, en fonction du style de leurs ancêtres, et leur permettre d’être interrogés par :has() introduirait des cycles.
ex.: Un sélecteur qui ne contrôle que les <a> qui contiennent une balise <img> comme enfant direct
a:has(> img) {}ex.: Le sélecteur suivant correspond aux éléments 'section' qui ne contiennent pas d'éléments d'en-tête :
a:has(> img) {}ex.: Le sélecteur suivant correspond aux éléments 'section' qui ne contiennent pas d'éléments d'en-tête :
section:not(:has(h1, h2, h3, h4, h5, h6))
