Un cas d'utilisation pour un sélecteur de parents

Avoir un «sélecteur de parents» dans CSS est mentionné régulièrement comme quelque chose que CSS pourrait vraiment utiliser. J'ai l'impression d'avoir eu cette pensée de nombreuses fois moi-même, mais quand je demande à mon cerveau un cas d'utilisation, j'ai du mal à en penser un. Eh bien, j'en avais juste un alors j'ai pensé que je le documenterais ici.

Un parent / enfant classique:

 <div>
  <div> </div>
</div>

Disons que cela a beaucoup de sens pour ce parent d'avoir un débordement caché et que l'enfant utilise un positionnement absolu.

 .parent {
   débordement: caché;
   Position: relative;
}

.enfant {
   Position: absolue; 
}

Disons maintenant qu'il y a une circonstance particulière où l'enfant doit être positionné en dehors du parent et être toujours visible. Le débordement caché est toujours un bon défaut pour la grande majorité des situations, il est donc préférable de laisser cette règle en place, mais dans cette situation très spécifique, nous devons l'emporter sur ce débordement.

 . spécial-enfant {
   Position: absolue; 
   En bas: -20px; / * doit être légèrement en dehors du parent * /
}

/ * Pas réel, mais juste pour faire un point * /
. spécial-enfant: parent (.parent) {
   débordement: visible;
}

Ce sélecteur ci-dessus est faux, mais il dit: «Sélectionnez le parent de. C'est peut-être comme ça:

 .parent <. sp><p> … Qui sélectionne l'élément à gauche plutôt que la droite. Qui sait? Les deux sont probablement problématiques d'une manière ou d'une autre et la syntaxe finale serait autre chose. Ou peut-être que nous ne l'obtiendrons jamais. Je ne sais pas. Document simplement un véritable cas d'utilisation que j'avais.</p>
<p> Vous pensez peut-être: «Pourquoi ne pas simplement utiliser une autre classe spéciale sur le parent?» Je l'aurais fait, mais le parent était injecté par une bibliothèque tierce via une API qui n'a pas proposé d'ajouter une classe de mon choix. En fin de compte, j'ai dû ajouter la classe au parent en écrivant un javascript personnalisé qui a interrogé le DOM pour trouver le. Spécial-enfant, trouver le parent, puis ajouter la classe là-bas.</p>
<p> Avez-vous tous d'autres cas d'utilisation pour un sélecteur de parents?</p>
<p> En voici un d'Uzair Hayat:</p>
<blockquote><p> Mon projet a un <fort> qui est enveloppé dans un <div>. Le <div> a quelques éléments de conception qui doivent prendre effet une fois que le <fort> est dans: focus. J'aurais pu utiliser :: avant et :: après des pseudo-éléments, mais les entrées ne les soutiennent pas car ce sont des éléments remplacés. À l'heure actuelle, je pèse JavaScript pour détecter si l'entrée est en foyer et applique une classe au div parent. J'aimerais pouvoir faire…<pre rel="CSS" data-line=""> entrée: focus: parent (div): après {
    Affichage: bloc;
    / * Afficher les modifications de conception lorsqu'elles sont focalisées * /
}