Ein Anwendungsfall für einen übergeordneten Selektor

Ein „übergeordneter Selektor“ in CSS wird regelmäßig als etwas erwähnt, das CSS wirklich gebrauchen könnte. Ich glaube, ich habe diesen Gedanken selbst schon oft gehabt, aber wenn ich dann mein Gehirn nach einem Anwendungsfall frage, fällt es mir schwer, einen zu finden. Nun, ich hatte gerade einen, also dachte ich, ich dokumentiere ihn hier.

Ein klassisches Eltern/Kind-Verhältnis

<div class="parent">
  <div class="child"></div>
</div>

Sagen wir, es ist sehr sinnvoll, dass dieses Elternteil einen versteckten Überlauf hat und auch, dass das Kind eine absolute Positionierung verwendet.

.parent {
   overflow: hidden;
   position: relative;
}

.child {
   position: absolute; 
}

Nehmen wir nun an, es gibt einen besonderen Umstand, bei dem das Kind außerhalb des Elternteils positioniert und dennoch sichtbar sein muss. Versteckter Überlauf ist für die überwiegende Mehrheit der Situationen immer noch eine gute Standardeinstellung, daher ist es am besten, diese Regel beizubehalten, aber in dieser sehr spezifischen Situation müssen wir diesen Überlauf überschreiben.

.special-child {
   position: absolute; 
   bottom: -20px; /* needs to be slightly outside parent */
}

/* Not real, but just to make a point */
.special-child:parent(.parent) {
   overflow: visible;
}

Dieser Selektor oben ist falsch, aber er besagt: „Wähle das Elternteil von .special-child aus“, was diese nötige Überschreibung ermöglichen würde. Vielleicht ist es so

.parent < .special-child {

}

...was das Element links anstatt rechts auswählt. Wer weiß? Wahrscheinlich sind beide auf irgendeine Weise problematisch und die endgültige Syntax wäre etwas anderes. Oder vielleicht bekommen wir es nie. Ich habe keine Ahnung. Nur ein realer Anwendungsfall, den ich hatte, dokumentiert.

Sie denken vielleicht: „Warum nicht einfach eine weitere spezielle Klasse auf dem Elternteil verwenden?“ Das hätte ich getan, aber das Elternteil wurde von einer Drittanbieterbibliothek über eine API eingefügt, die keine Klasse meiner Wahl darauf anbot. Letztendlich musste ich die Klasse zum Elternteil hinzufügen, indem ich etwas benutzerdefinierten JavaScript schrieb, das das DOM abfragte, um .special-child zu finden, das Elternteil zu finden und dann die Klasse dort hinzuzufügen.

Haben Sie, Leute, andere Anwendungsfälle für einen übergeordneten Selektor?

---

Hier ist einer von Uzair Hayat

Mein Projekt hat ein <input>, das in ein <div> eingeschlossen ist. Das <div> hat einige Designelemente, die sich auswirken müssen, sobald das <input> in :focus ist. Ich hätte ::before und ::after Pseudoelemente verwenden können, aber Inputs unterstützen diese nicht, da sie ersetzte Elemente sind. Im Moment verwende ich JavaScript, um zu erkennen, ob der Input im Fokus ist und eine Klasse auf das übergeordnete Div anzuwenden. Ich wünschte, ich könnte...

input:focus:parent(div):after {
    display: block;
    /* display design changes when focused */
}