selector nach Element

[T-Rex]

Moin,

Da gibts ein Element. Hovert man über das Element wird ein anderes Element sichtbar. z.B. so:

<div class='hover'></div>  
<div class='sichtbar'></div>  
.hover:hover + sichtbar  
{  
    display: block;  
}

Das funktioniert da die zwei Elemente Nachbarn sind. Ich möchte .sichtbar aber  ans Ende des DOM stellen. Also das ganze etwas abstrakter betrachten. Es könnte z.B. so ein Baum entstehen:

  
<div class='hover'></div>  
<div class='nocheinElement'></div>  
<div class='nocheinElement'></div>  
<div class='nocheinElement'></div>  
<div class='sichtbar'></div>  

oder auch so

  
<div class='wrapper'>  
    <div class='hover'></div>  
</div>  
<div class='sichtbar'></div>  

Sicher ist, dass sichtbar immer nach hover kommt. Vor allem das letzte Beispiel bekomme ich nicht gelöst :(.

Gruß
sichtbarer
T-Rex

PS: schon mal danke Gunnar ;)

[Gunnar Bittersmann]

@@T-Rex:

nuqneH

Sicher ist, dass sichtbar immer nach hover kommt.

Nö.

In deinem 2. Beispiel ist das der Fall; dann kannst du per '.hover:hover ~ .sichtbar' selektieren.

Im 3. Beispiel kommt sichtbar nicht nach hover (im Teilbaum unter wrapper), sondern nach wrapper.

Vor allem das letzte Beispiel bekomme ich nicht gelöst :(.

Das sollte an Anbetracht der (gegenwärtigen) Unlösbarkeit auch nicht verwunden.

PS: schon mal danke Gunnar ;)

Nicht dafür.

Qapla'

[suit]

Nicht dafür.

Ich bin enttäuscht.

[suit]

PS: schon mal danke Gunnar ;)

Gunnar wird dir eine CSS4-Lösung vorschlagen, die auf dem Eltern-Selektor basiert - vermutlich so etwa, wobei ich jetzt nicht sicher bin, ob der Eltern-Seketor in dieser Form mehrfach verwendet werden kann.

!body>.hover:hover .sichtbar

Das Konzept des Eltern-Selektors ist noch nicht ganz klar - aktuell wird noch überlegt ob nur der nächste Kombinator berücksichtigt wird (dann würde obenstehendes Beispiel funktioniern) oder alle (das würde mehrere Eltern-Selektoren aber ziemlich verwirrend machen).

Ich würd hier ein Konzept wie bei Sizzle bevorzugen: das geht in die Richtung von :match() in CSS4, ist allerdings dank jQuery schon sehr verbreitet.

body:has(.hover:hover) .sichtbar

[dave]

Hi,

Gunnar wird dir eine CSS4-Lösung vorschlagen […]

AFAIK gibt es kein CSS4. Was du vermutlich meinst ist Selectors Level 4?

[…] die auf dem Eltern-Selektor basiert

Den gibt es da allerdings nicht, sondern nur die Möglichkeit das "subject" zu definieren.

!body>.hover:hover .sichtbar

Das ginge allerdings mit $ anstelle von !
Zudem würde der Selektor dann etwas anderes selektieren als gewünscht.

Das Konzept des Eltern-Selektors ist noch nicht ganz klar - aktuell wird noch überlegt ob nur der nächste Kombinator berücksichtigt wird (dann würde obenstehendes Beispiel funktioniern) oder alle (das würde mehrere Eltern-Selektoren aber ziemlich verwirrend machen).

Ich hätte gerne Links woher du diese Infos hast und was genau du mit "CSS4" meinst.

~dave

[dave]

!body>.hover:hover .sichtbar

Das ginge allerdings mit $ anstelle von !

In einer früheren Revision der Spezifikation war dies scheinbar ein !, kein $

Richtig?

[suit]

!body>.hover:hover .sichtbar

Das ginge allerdings mit $ anstelle von !

In einer früheren Revision der Spezifikation war dies scheinbar ein !, kein $

Unterhosen

[suit]

Gunnar wird dir eine CSS4-Lösung vorschlagen […]

AFAIK gibt es kein CSS4. Was du vermutlich meinst ist Selectors Level 4?

Ja, CSS4 wird wie auch CSS3 Modular - ob es jetzt CSS4 oder CSS3 "gibt" ist eine Spitzfindigkeit :)

[…] die auf dem Eltern-Selektor basiert

Den gibt es da allerdings nicht, sondern nur die Möglichkeit das "subject" zu definieren.

Ja - der einfachheit halber habe ich es dabei belassen hier keine Unterscheidung zu treffen, auch der "Nachfahrenselektor" ist eigentlich ein Kombinator usw.

!body>.hover:hover .sichtbar

Das ginge allerdings mit $ anstelle von !

Das wird wie Unterhosen gewechselt mal war es $E dann !E jetzt wird grade diskutiert ob man nicht E! draus macht um es nicht mit einer negation zu verwechseln

Du solltest keinen alten Stand konsultieren:
http://www.w3.org/TR/selectors4/
http://dev.w3.org/csswg/selectors4/

Zudem würde der Selektor dann etwas anderes selektieren als gewünscht.

Nicht notwendigerwise

Das Konzept des Eltern-Selektors ist noch nicht ganz klar - aktuell wird noch überlegt ob nur der nächste Kombinator berücksichtigt wird (dann würde obenstehendes Beispiel funktioniern) oder alle (das würde mehrere Eltern-Selektoren aber ziemlich verwirrend machen).

Ich hätte gerne Links woher du diese Infos hast und was genau du mit "CSS4" meinst.

Ich meine das CSS4-Selectors-Module - nur (siehe oben) die aktuelle Version wo es vor allem interssant ist, die Kommentare zu lesen bzw. den eigenen Abschnitt zum Selector Subject (aka "parent selector")
http://www.w3.org/TR/selectors4/#subject

[dave]

Hi,

vielen Dank.

~dave