Ein Anwendungsfall für einen übergeordneten Selektor

Einen „übergeordneten Selektor“ in CSS zu haben, wird regelmäßig erwähnt, da CSS wirklich verwenden könnte. Ich habe das Gefühl, dass ich diesen Gedanken oft selbst hatte, aber wenn ich mein Gehirn um einen Anwendungsfall bitt, fällt es mir schwer, an einen zu denken. Nun, ich hatte gerade einen, also dachte ich, ich würde ihn hier dokumentieren.

Ein klassisches Elternteil/ein klassisches Kind:

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

Sagen Sie, es ist sehr sinnvoll, dass dieses Elternteil einen versteckten Überlauf hat und auch das Kind die absolute Positionierung nutzt.

 .PARENT {
   Überlauf: versteckt;
   Position: Relativ;
}

.Kind {
   Position: absolut; 
}

Nehmen wir nun an, es gibt einen besonderen Umstand, unter dem das Kind außerhalb des Elternteils positioniert werden muss und trotzdem sichtbar ist. Der versteckte Überlauf ist für die überwiegende Mehrheit der Situationen immer noch ein guter Verhältnis. Daher ist es am besten, diese Regel an Ort und Stelle zu lassen, aber in dieser sehr spezifischen Situation müssen wir diesen Überlauf außer Kraft setzen.

 .Special-Kind {
   Position: absolut; 
   unten: -20px; / * muss leicht externer Elternteil sein */
}

/ * Nicht real, aber nur um einen Punkt zu machen */
.Special-Kind: Eltern (.Parent) {
   Überlauf: sichtbar;
}

Dieser Selektor oben ist gefälscht, aber es heißt: "Wählen Sie den übergeordneten. Special-Kind", was diese Überschreibung bei Bedarf ermöglichen würde. Vielleicht ist es so:

 .PARENT <.special-kind><p> … Was das Element links und nicht im rechten auswählt. Wer weiß? Wahrscheinlich sind beide irgendwie problematisch und die endgültige Syntax wäre etwas anderes. Oder vielleicht bekommen wir es nie. Ich habe keine Ahnung. Nur einen echten Anwendungsfall dokumentieren, den ich hatte.</p>
<p> Sie denken vielleicht: "Warum nicht einfach eine andere spezielle Klasse für den Elternteil verwenden?" Ich hätte es tun, aber der Elternteil wurde von einer Bibliothek von Drittanbietern durch eine API injiziert, die nicht anbot, eine Klasse meiner Wahl hinzuzufügen. Letztendlich musste ich die Klasse dem Elternteil hinzufügen, indem ich ein benutzerdefiniertes JavaScript schrieb, das das DOM ausfragt, um das .Special-Kind zu finden, den übergeordneten übergeordneten und dann die Klasse hinzuzufügen.</p>
<p> Haben Sie alle andere Anwendungsfälle für einen übergeordneten Selektor?</p>
<p> Hier ist einer von Uzair Hayat:</p>
<blockquote><p> Mein Projekt hat eine <pr>, die in ein <div> eingewickelt ist. Das <div> verfügt über einige Designelemente, die wirksam werden müssen, sobald sich der <eingang> befindet: Fokus. Ich hätte :: vor und :: nach Pseudoelementen, aber Eingaben unterstützen diese nicht, da sie ersetzt sind. Im Moment javaScript erkennen ich, ob die Eingabe im Fokus steht, und wende eine Klasse auf die übergeordnete DIV an. Ich wünschte ich könnte ...<pre rel="CSS" data-line=""> Eingabe: Fokus: Elternteil (Div): Nach {{
    Anzeige: Block;
    / * Display -Design ändert sich bei fokussierter */ *
}