Element "Rückwärts" ansprechen

[Corsachriz]

Hallo zusammen,

ich habe mich schon immer etwas gefragt und da ich aktuell wieder an einem projekt bin wo ich das ganz gut gebrauchen kann Frage ich einfach mal. Kann ich ein Element "Rückwärts" ansprechen ? Hier ein Beispiel:

<ul>
<li><a href="#nogo">Link</a></li>
<li><a href="#nogo">Ich habe Unterpunkte</a>
<ul>
<li><a href="#nogo">Unterpunkt</a>
<li><a href="#nogo">Unterpunkt</a>
<li><a href="#nogo">Unterpunkt</a>
<li><a href="#nogo">Unterpunkt</a>
</ul>
</ul>

Das ganze ist ein wird als Dropdown Menü umgesetzt. Jetzt möchte ich, dass der 2 Link eine andere Farbe, bzw einen kleinen Pfeil im Hintergrund bekommt. Klar könnte ich jetzt eine Klasse dafür vergeben, die Liste wird allerdings so von einem CMS generiert und ich komme jetzt grade nicht ohne weiteres an den Code wo es generiert wird.

Kann ich jetzt irgendwie mit CSS den Punkt ansprechen der eine weitere Liste hat ?

Ich habe schonal sowas gesehen wie:

li a >ul

Ist das sowas oder ist das nur ein Browserhack für irgendwas ?
Geht das überhaupt einfach so ohne eine Klasse zu vergeben ?

Gruß,
Chriz

[kidding]

Im Grunde genommen ist das richtig, was du da schreibst.

Um das UL im LI anzusprechen könntest du folgendes verwenden:

ul li ul

Oder auch:

ul li > ul

Unterschied zwischen diesen beiden ist, dass beim ersten alle UL-Childs im LI angesprochen werden.
Im zweiten hingegen werden nur die UL-Childs angesprochen, die sich direkt im LI befinden.
Falls du nicht vor hast, in dein zweites UL ein drittes (oder noch mehr) ULs einzufügen ist die erste Variante zu bevorzugen, da hierbei die Browserkompatibilität höher sein würde.

Browser übergreifend könntest du auch Javascript verwenden. In Verbindung mit zum Beispiel jQuery werden diese Verzweigungen in jedem Browser unterstützt, sofern Javascript aktiviert ist.

[wildmieze]

Ich denke, Chriz möchte nicht die <ul> ansprechen, sondern das übergeordnete <li> dazu.

Meines Wissens ist das mit reinem CSS nicht möglich. Ein kurzes googlen nach "css parent" scheint das zu bestätigen. Allerdings weiß ich nicht, wieviel sich da in CSS 3 evtl. getan hat, ich bin nicht wirklich up to date ...

Mit javascript/jQuery gibt es aber bestimmt einige Lösungen, wie kidding ja auch schon gesagt hat.

EDIT: Hmmm ... ich überlege gerade, ob man mit Positionierungen und/oder entsprechenden negativen margins irgendwie "schummeln" kann .. also doch die <ul> ansprechen und das gewünschte Hintergrundbild quasi nach oben hinter das <li> schieben .. *kratzamkopp* .. ist aber nur ein spontaner Gedanke, klappt vermutlich nicht^^

[kidding]

Ok, dann hab ich es wohl falsch verstanden.
Also soll der Link eine andere Farbe haben, wenn das übergeordnete LI noch ULs besitzt?

Mit jQuery würde es so funktionieren:

$('ul li').has('ul').children('a').css('color', 'red');

Beziehungsweise einfach eine Klasse dem a-Tag hinzufügen:

$('ul li').has('ul').children('a').addClass('andereKlasse');

EDIT: Hmmm ... ich überlege gerade, ob man mit Positionierungen und/oder entsprechenden negativen margins irgendwie "schummeln" kann .. also doch die <ul> ansprechen und das gewünschte Hintergrundbild quasi nach oben hinter das <li> schieben .. *kratzamkopp* .. ist aber nur ein spontaner Gedanke, klappt vermutlich nicht^^

Wäre so oder so nicht zu empfehlen. Wäre semantisch nicht korrekt.

[wildmieze]

Najo .. ich muss gestehen, daß ich mir um die Semantik im CSS-Bereich eigentlich keine Gedanken mache .. die Semantik im HTML-Teil wird ja nicht verändert, die CSS sind für mich idR nur ein "Aufhübschen", da nehm ich dann meist keine große Rücksicht

[kidding]

Ich hatte das jetzt so verstanden, dass man die Unterpunkte in das äußere UL packt und das wäre alles andere als semantisch korrekt. Sonst wüsste ich nicht wie du das machen willst. Wäre aber auch nicht möglich, da er ja nichts am CMS verändern will/kann.

Am besten macht man das aber mit Javascript. In den meisten Fällen wird ja eh schon jQuery o.Ä. verwendet und damit könnte man das ja dann schön machen.

[wildmieze]

Neenee, die Liste bliebe unverändert, so wie sie oben steht. Aber wie gesagt, war nur eine spontane Idee, die vermutlich eh nicht funktioniert^^ .. besonders, weils ja auch noch ein Ausklappmenü ist.

jQuery erscheint mir spontan auch als gute Lösung. Ist halt die Frage, ob er das im CMS unterbringen kann .. wir werdens erfahren

[hero-master]

Moin
wenn das Ganze nicht dynamisch funktionieren muss, kannst du den CSS3-Selektor "nth-child" verwenden, um bestimmte Listenpunkte anzusprechen, ohne eine Klasse zu verwenden.

#navi > li:nth-of-type(2) > a { background: red; padding-left: 10px }

[kidding]

Ist im Prinzip ja schon eine Klasse, beziehungsweise genauer eine Pseudoklasse.
Damit wäre dir Browserkompatibilität aber nicht mehr zu 100% gegeben.
Da ist Javascript sinnvoller.

[hero-master]

Ist im Prinzip ja schon eine Klasse, beziehungsweise genauer eine Pseudoklasse.

Trotzdem sollte man diese Begriffe auseinander halten

Damit wäre dir Browserkompatibilität aber nicht mehr zu 100% gegeben.

Richtig. Der IE spielt da vor allem nicht mit.

Da ist Javascript sinnvoller.

Ich wollte auch nur Alternativen vorschlagen bzw. andeuten, dass es auch mit CSS geht, was ja die Fragestellung hier war. Ob nun JS sinnvoller ist oder man eben über das Prinzip der Graceful Degradation geht, ist dann dem Projekt geschuldet

[Corsachriz]

Vielen Dank für die vielen Ansätze,

Da ich es so einfach wie möglich halten wollte und am liebsten auch ohne CSS3 machen wollte ist die simpelste Lösung wohl die Klasse direkt bei der Menügenerierung zu vergeben (Zumal das Menü dynamisch ist, als wäre wohl wirklich die einzige Möglichkeit Javascript)

Damit ist aber wenigstens die Frage gelöst

DANKE!