CSS: ALLE im DOM folgende Elemente auswählen

[Clara Himmel]

Hallo,

bei folgendem Fallbeispiel bräuchte ich ein wenig Hilfe:

<div><a href="...">LINK</a></div>
<div class="Sektion">...</div>

Nun will ich mit <a> die Klasse "Sektion" ansteuern, nur eignen sich Selektoren à la + bzw. ~ dazu leider nicht, da <a> und "Sektion" keine Geschwisterelemente sind (daher funktioniert mein Ansatz: "a:hover ~ .Sektion" nicht)

Meine Frage daher: gibt es einen Selektor, der SÄMTLICHE dem Link folgende Klassen (oder auch nur eine bestimmte im DOM NÄCHSTfolgende Klasse) adressiert, auch wenn es sich dabei NICHT um Geschwister handelt? [EDIT]Ich suche hier dezidiert nach einer Lösung, die sich mit CSS umsetzen lässt.[/EDIT]

[Bitte keine Alternativvorschläge. Mir ist durchaus bewusst, dass ~ oder auch + funktionieren, sobald <a> nicht mehr in ein eigenes <DIV> verpackt ist und "Sektion" und <a> damit Geschwister sind. Ich bin mir auch darüber im Klaren, dass sich mein Problem unter Verwendung von Javascript leicht lösen lässt.]

Danke!

[Matthias Apsel]

Hallo Clara Himmel,

<div><a href="...">LINK</a></div>
<div class="Sektion">...</div>

Nun will ich mit <a> die Klasse "Sektion" ansteuern, nur eignen sich Selektoren à la + bzw. ~ dazu leider nicht, da <a> und "Sektion" keine Geschwisterelemente sind (daher funktioniert mein Ansatz: "a:hover ~ .Sektion" nicht)

Meine Frage daher: gibt es einen Selektor, der SÄMTLICHE dem Link folgende Klassen (oder auch nur eine bestimmte im DOM NÄCHSTfolgende Klasse) adressiert, auch wenn es sich dabei NICHT um Geschwister handelt?

Es gibt keine CSS-Lösung dafür, da CSS weder rück- noch aufwärts selektieren kann.

Bis demnächst
Matthias

[Clara Himmel]

Hallo,

danke für die Aufklärung!

Werde wohl einfach den <a> Tag aus seiner <DIV> Umgebung befreien, dafür mit einem display:block versehen und gut ist

[beatovich]

hallo

:hover ist in Zeiten von touchscreens sowieso nicht so toll.

Geht's darum ein Element temporär einzuschalten ist folgendes möglich

<input type="checkbox" id="switch1">
<label for="switch1">Label</label>
<div id="switchonby1"> ... </div>

#switchedonby1 {display:none;}
#switch1:checked ~ #switchedonby1 {display:block;}