selector nach Element
T-Rex
- css
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 ;)
@@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'
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
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
!body>.hover:hover .sichtbar
Das ginge allerdings mit $ anstelle von !
In einer früheren Revision der Spezifikation war dies scheinbar ein !, kein $
Richtig?
!body>.hover:hover .sichtbar
Das ginge allerdings mit $ anstelle von !
In einer früheren Revision der Spezifikation war dies scheinbar ein !, kein $
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
Hi,
vielen Dank.
~dave