CSS Auswahl Geschwister eines Elements mit einem bestimmten Unterelement?

Question

Dieser ist trippy. Ich lehne es ist zu denken unmöglich :-(

Jede Idee geschätzt.

Das Snippet unten ein Teil einer viel größeren Struktur mit vielen .step Elementen ist.

Ich brauche alle .stepText Elemente passen das sind neben .stepTitleAndImages ul.standard

Mit anderen Worten, entsprechen alle .stepText Elemente, die .step Eltern haben, die .stepTitleAndImages Kind hat, das .stepImages.standard Kind

hat

<div class="step"> 
    <div class="stepTitleAndImages"> 
    <h3 class="stepTitle"></h3> 
    <ul class="stepImages standard"></ul> 
    <div class="clearer"></div> 
    </div> 
    <div class="stepText "></div> **HOW TO SELECT ALL ELEMENTS LIKE THIS ONE?** 
    <div class="clearer"></div> 
</div> 

<div class="step"> 
    <div class="stepTitleAndImages"> 
    <h3 class="stepTitle"></h3> 
    <ul class="stepImages medium"></ul> 
    <div class="clearer"></div> 
    </div> 
    <div class="stepText "></div> 
    <div class="clearer"></div> 
</div> 

PS: Ich kann den HTML nicht ändern. Kann nichts anderes als reines CSS verwenden.

Answer 1

Diese kann nicht mit Ihrer HTML-Struktur und mit reinem CSS erfolgen. Die nächste Lösung für Ihr Problem, die HTML-Struktur und mit reinem CSS zu ändern, wäre die standard Klasse zu seinem übergeordneten Tag zu verschieben:

<div class="stepTitleAndImages standard"> <h3 class="stepTitle"></h3> <ul class="stepImages"></ul> <div class="clearer"></div> </div>

Dies würde ermöglicht es Ihnen, die adjacent sibling selector (+) zu verwenden, die Spiele der zweite Selektor, wenn er das direkte nächste Geschwister der ersten, wie dies ist:

.stepTitleAndImages.standard + .stepText { /* Styles */ }

Ein flexiblerer Ansatz wäre die Verwendung der general sibling selector die würde passen die durch den ersten Selektor voran Geschwister, nicht nur die direkten nächsten:

.stepTitleAndImages.standard ~ .stepText { /* Styles */ }

Die :has Pseudoklasse is in development by Mozilla, aber es hat noch keinen stabilen Browser nicht getroffen hat. Mit ihm und mit Ihrem HTML-Struktur, könnten Sie gehen:

.stepTitleAndImages:has(.standard) + .stepText { /* Styles */ }

Leider zur Zeit Sie dies mit CSS auf andere Weise nicht lösen können (und mit Ihrem HTML-Struktur) nur.

Answer 2

das Verwenden Sie einfach für den ersten Fall der Auswahl

.step:nth-child(1) .stepText { 
... Your CSS here 
} 

Für zweite Einsatz

.step:nth-child(2) .stepText { 
... Your CSS here 
} 

beide verwenden Zur Auswahl

.step .stepText { 
... Your CSS here 
} 

Dann sollten Sie jquery benötigen für diese

Auswählen von Eltern Geschwister ist nicht möglich, nur mit reinem CSS noch, du durch eine einzige Linie von jquery erreichen kann:

$('ul.standard').parent().siblings(".stepText").css(...your CSS here);