CSS: Was bedeutet das " ~ "
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antwort
beispiel
besseres beispiel
darauffolgenden elemente
eigenschaft
element
folgendem beispiel
format
gleichen ebene bekommen
grund
http
jemand
meinung
posten
spezifikation
syntax
untergeordneten element
url
zeichen
-
Hallo. Ich muss hier einfach mal wieder etwas posten :)
Ich hab gerad ebei Google versucht etwas zu finden, aber mit dem Zeichen selbst findet man gar nichts und wie ich es umschreiben soll (Formate o.Ä.) kam ich nicht weiter. Sicher weiß jemand hier etwas darüber und das Thema ist schnell erledigt:
Was bedeutet das " ~ " in folgendem Beispiel:
.sp-selector-4:checked ~ .sp-arrow.sp-a5 { }
Grüße und wie immer dankbar für eine Antwort,
Jan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Die Wikipedia hat eine Übersicht zur Syntax:
http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax
E ~ F Selektiert alle Elemente F, die einen Vorgänger E auf gleicher Ebene haben
Das ist der sogenannte Geschwisterselektor.
Angewendet auf dein Beispiel:
.sp-selector-4:checked ~ .sp-arrow.sp-a5 Selektiert alle Elemente .sp-arrow.sp-a5 { }, die einen Vorgänger .sp-selector-4:checked auf gleicher Ebene haben.
Im Grunde heißt das: Alle .sp-arrow.sp-a5 -Elemente, die .sp-selector-4:checked untergeordnet sind erhalten diese Eigenschaften.
Ein meiner Meinung nach besseres Beispiel gibt es direkt in den Spezifikationen dazu:
http://www.w3.org/TR/css3-selectors/#general-sibling-combinators
Auf deutsch gibt es das ganze auch nochmal:
http://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Geschwisterselektor
Edit: Ich habe gerade gemerkt, dass ich es ein bisschen falsch verstanden/erklärt habe. Es heißt nicht, alle untergeordneten Element sondern alle darauffolgenden Elemente auf der gleichen Ebene bekommen diese Eigenschaften.
Beitrag zuletzt geändert: 29.11.2013 14:37:14 von tchab -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage