What is the selector syntax to select a tag within an id via the class name? For example, what do I need to select below in order to make the inner "li" turn red?
<html>
<head>
<style type="text/css">
#navigation li
{
color: green;
}
#navigation li .navigationLevel2
{
color: red;
}
</style>
</head>
<body>
<ul id="navigation">
<li>Level 1 item
<ul class="navigationLevel2">
<li>Level 2 item</li>
</ul>
</li>
</ul>
</body>
</html>
This question is related to
css
css-selectors
This will also work and you don't need the extra class:
#navigation li li {}
If you have a third level of LI's you may have to reset/override some of the styles they will inherit from the above selector. You can target the third level like so:
#navigation li li li {}
Just needed to drill down to the last li.
#navigation li .navigationLevel2 li
.navigationLevel2 li { color: #aa0000 }
Here's two options. I prefer the navigationAlt option since it involves less work in the end:
<html>_x000D_
_x000D_
<head>_x000D_
<style type="text/css">_x000D_
#navigation li {_x000D_
color: green;_x000D_
}_x000D_
#navigation li .navigationLevel2 {_x000D_
color: red;_x000D_
}_x000D_
#navigationAlt {_x000D_
color: green;_x000D_
}_x000D_
#navigationAlt ul {_x000D_
color: red;_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<ul id="navigation">_x000D_
<li>Level 1 item_x000D_
<ul>_x000D_
<li class="navigationLevel2">Level 2 item</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
<ul id="navigationAlt">_x000D_
<li>Level 1 item_x000D_
<ul>_x000D_
<li>Level 2 item</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
</body>_x000D_
_x000D_
</html>Source: Stackoverflow.com