Le CSS: a un sélecteur (et 4 exemples)

Le sélecteur CSS :has() révolutionne la sélection des éléments en ciblant les parents en fonction des propriétés de leurs enfants. C'est plus qu'un simple "sélecteur de parents" - il offre de puissantes capacités de style conditionnel. Par exemple, vous pouvez style<div> Éléments uniquement s'ils contiennent un<code><p> :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> div: a (p) { Contexte: rouge; }</pre><div class="contentsignin">Copier après la connexion</div></div> <p> Bien que précédemment non pris en charge,: <code>:has() gagne maintenant du terrain, apparaissant dans Safari Technical Aperçu 137.

Explorons un autre scénario: ajoutant de l'espacement après les en-têtes, mais ajustant l'espacement si un sous-titre est présent:

 H2,
.Subtitle {
  marge: 0 0 1.5rem 0;
}
.
  marge: 0 0 0.2rem 0; / * Espacement réduit en raison du sous-titre * /
}

Remarque le chaînage de :has() .header-group:has(h2):has(.subtitle) :. Cela diffère de l'utilisation d'une liste de sélecteurs dans :has() , comme .header-group:has(h2 .subtitle) L'approche enchaînée sélectionne le<h2></h2> uniquement si .header-group<h2></h2> et un .subtitle . L'approche de la liste des sélecteurs, cependant, a une logique de sélection différente.

Considérez :has() en tant que sélecteur de parent pseudo-classe. Il permet de coiffer les éléments des parents conditionnellement en fonction de leurs enfants, un écart important par rapport à l'approche descendante de CSS traditionnelle. Cette capacité ouvre de nombreuses possibilités auparavant inaccessibles avec CSS seul.

Liens de style contenant des images:

 a: a (> img) {
  Border: 20px blanc solide;
}

> img s'assure que l'image est un enfant direct du<a></a> . :has() peut également être utilisé pour la marge / rembourrage conditionnel en fonction du contenu.

:has() fait partie du niveau 4 des sélecteurs CSS, aux côtés de l'utile :not de pseudo-classe. C'est beaucoup plus puissant qu'un simple sélecteur parent; Il permet de sélectionner un élément enfant en fonction du contenu du parent. Par exemple:

 / * Styles des éléments avec un<figcaption> enfant */
Figure: a (figCaption) {…}

/ * Styles<img  alt="Le CSS: a un sélecteur (et 4 exemples)" > dans<figure> contenant un<figcaption> * /
Figure: a (Figcaption) img {…}</figcaption></figure></figcaption>

Les listes de chaînage et de sélecteur sont prises en charge:

 Article: a (h2): a (ul) {…} // enchaîné
Article: A (h2, ul) {…} // Liste des sélecteurs

Cependant, sachez que les sélecteurs non valides au sein d'une liste invalideront l'ensemble :has() . Utilisation :where() ou :is() pour une manipulation plus robuste de sélecteurs potentiellement invalides.

Test de soutien:

 @Supports (Selector (: Has (P))) {
  / * Soutenu! * /
}

Le sélecteur :not() , également à partir des sélecteurs CSS, le niveau 4, offre un excellent support de navigateur et une amélioration de la lisibilité:

 ul li: pas (: premier de type) {
  Couleur: rouge;
}

Cela stylise tous les éléments de liste sauf le premier. Des techniques similaires peuvent être utilisées pour les marges:

 ul li: pas (: dernier de type) {
  marge-fond: 20px;
}

Les sélecteurs CSS Level 4 comprend également :is() , offrant des alternatives concises à de longs sélecteurs:

 est (section, article, à part, nav): Is (H1, H2, H3, H4, H5, H6) {
  Couleur: # bada55;
}

En résumé :has() , avec :is() et :not() , fournit des moyens puissants et lisibles pour styliser des éléments basés sur des relations complexes au sein du DOM.

Lire plus approfondie:

• Adrian Bene - Meet :has() , un sélecteur de parents CSS natif (et plus)
• Bramus van Damme - Le sélecteur CSS :has() est bien plus qu'un «sélecteur parent»
• Michelle Barker - :has() a atterri à Safari

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!