CSS '>'

supertux

Hi

ich versuche CSS Menüs zu erzeugen, wie in http://www.meyerweb.com/eric/css/edge/menus/demo.html gemacht wird, dabei habe ich den gesamten CSS Teil kopiert und teste eigene Änderungen. Aber mir ist jetzt etwas aufgefallen, dass ich nicht alles verstehe. Die Grundidee ist mir klar, aber noch habe ich kleine Fragen. Z.b: was ist der Unterschied zwischen <tag id="name"> und <tag class="name">? Also, ich weiß, dass in dem CSS Teil anders deklariert wird

/* für class */
tag.name { ··· }

/* für id */
tag#name { ··· }

was ist eigentlich der Unterschied? Gibt es Vor- und Nachteile wenn man die eine oder die andere Variante wählt?

Und ">" ist mir auch aufgefallen. Was bedeutet z.b.

li.sub > a {font-weight: bold; background: #FFE;}

was hat diese '>' da zu suchen? Wenn ich das entferne, dann passieren seltsame Sachen, die ich mir nicht erklären kann. Im CSS steht nämlich:

ul li:hover > ul {display: block; position: absolute; top: -1px; left: 100%;}
...
ul#topmenu > li:hover > ul {width: 10em; top: 1.5em; left: -3px;}

ja, bis auf #topmenu sind die zeilen praktisch identisch, doch beide sind wichtig, wegen dem ersten '>'. Was bewirkt das?

Danke für die Erklärung.

flenders

class / . nimmt man, wenn man mehrere Elemente hat, die gleich formatiert werden sollen, weährend id / # dann zum Einsatz kommt, wenn ein ganz spezielles Element formatiert werden soll.

> ist ein Selector: http://www.w3.org/TR/REC-CSS2/selector.html

supertux

flenders schrieb:

class / . nimmt man, wenn man mehrere Elemente hat, die gleich formatiert werden sollen, weährend id / # dann zum Einsatz kommt, wenn ein ganz spezielles Element formatiert werden soll.

> ist ein Selector: http://www.w3.org/TR/REC-CSS2/selector.html

Danke schön, das war echt hilfreich. Diese Seite von den CSS Menüs ist echt cool, doch leider erklärt der Autor nicht alles, was sich dahinter steckt.

edit: wow, cooles link (das mit dem Selector), nun ist mir vieles klarer was der CSS2 Syntax angeht.

CSS '&gt;'

CSS '>'