Liste innerhalb Liste in CSS
EnKu
- css
0 suit
Hallo Leute,
ich habe eine Frage. Geht das wenn ich beispielweise eine bestimmte Stufe von einer Liste in css aufrufe ohne die andere Stufe in der Liste zu rufen?
Ich meinte hier: in einer Liste gibt es eine andere Liste.
Bsp:
<nav class="$nav_css_class" id="navigation">
<ul class="parent-menu">
#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
<li class="selected">
#else
<li>
#end
<a>$nav_item.getName()</a>
#if ($nav_item.hasChildren())
<ul class="child-menu">
#foreach ($nav_child in $nav_item.getChildren())
#if ($nav_child.isSelected())
<li class="child-selected">
#else
<li>
#end
<a>$nav_child.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
</nav>
ich möchte nur die anchor von parent-menu ohne child-menu holen. Wie geht das?
Wenn ich in css so mache:
#navigation ul.parent-menu li a{
color:#444;
text-decoration:none;
font-weight:bold;
background:#ddd;
margin:0;
padding:0.25em 1em;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #aaa;
border-radius:10px 10px 1px 1px;
}
die Anchor in child-menu wird trotzdem beeinflust.
#navigation ul.parent-menu li a{
die Anchor in child-menu wird trotzdem beeinflust.
Das selektiert alle a Elemente die irgendwo innerhalb eines li elements vorkommen, welches wiederum irgendwo in einem ul-Element mit der Klasse "parent-menu" vorkommt, welches wiederum irgendwo in einem Element mit der id "navigation" vorkommen darf
Du suchst nicht den Nachfahrenkombinator " " sondern den Kindkombinator ">"
http://www.w3.org/TR/selectors/#combinators
Im übrigen ist dein HTML überarbeitungsbedürftig
Das nav-Element muss nicht zwangsläufig die id "navigation" haben, es wird auch so im DOM ziemlich eindeutig zu finden sein, nehme ich an.
die Klassen parent- und child-menu in den ul-Elementen können aber auf jeden Fall ersatzlos weg, da du die verschachtelungstiefe problemlos über den Kindkombinator regeln kannst.