Selektor für nachfolgende Geschwister eines Elements, das ein spezifisches Element enthält

Question

Gibt es eine CSS-Methode zum Auswählen von Elementen vom X-Typ, die nach Element Y-Typ mit Z-Typ-Elementen sind?

den folgenden HTML Gegeben, i nach dem Z-Typ nur könnte, nicht nach dem Typ Y enthält Z.

.y .z:after { 
 
    color: green; 
 
    /* x is not green because it's after y, not z */ 
 
}

<span class="y"> 
 
    y 
 
    <span class "z"> 
 
    z 
 
    </span> 
 
</span> 
 
<span class="x"> 
 
    x 
 
</span>

Answer 1

Keine

Da es keine Verfahren zur Auswahl UP das DOM ... noch ist.

Es gibt, unter CSS3, no parent selector oder previous sibling selector.

CSS4 bietet den :has Selektor, in dem Fall, dass Sie

.y:has(> .z) + .x 

jedoch gegenwärtig zu verwenden wären in der Lage, kein Browser diese Wähler unterstützen.

---

Anmerkung: Die ::after 'Element' ist, in der Tat, ein Pseudoelement, nicht einen Selektor, verwendet in erster Linie für Styling-Zwecke zum Einfügen "Inhalt" innen das Element, auf die die ::after pseudo -Element ist beigefügt.

Answer 2

Es gibt zwei Geschwister Selektoren + und ~. Ersteres gilt für unmittelbar vorhergehende Geschwister, letzteres für vorhergehende Geschwister.

Ihr Beispiel Geschwister nicht zeigen, aber nur untergeordnete Elemente, in denen keine spezielle Selektor benötigt wird: .y .z { }