CSS to effect "li" only if a child of a specific "ul" - html

Question

I have a unordered list as so:
<ul id="vertical_menu">
<li>Home</li>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
Now, I need to add borders to the "list item" li elements only if it is a child of the ul with the id vertical_menu.
Any ideas on how to do this?

Answer 1

ul#vertical_menu > li
{
/* apply li styles here as needed */
border: 1px solid #000;
}
ul#vertical_menu describes a ul element with ID 'vertical_menu'. > li describes a direct child element of type li. Any styles you list here will apply directly to the li elements as you wanted.
If you require support for IE6, the child selector > will be an issue. One work around to this is to apply styling to single level li, and "reset" it on further nested li, such as:
ul#vertical_menu li
{
border: 1px solid #000;
}
ul#vertical_menu li li
{
border: none;
}
This will add border to the first level list items within the vertical_menu, and will remove the border from any further nested items. Again not necessary to consider with modern browsers - depends on requirements.
In HTML markup, element IDs should be unique, so realistically you also don't need to select by ul and can simply use #vertical_menu > li or #vertical_menu li. Including ul in the selector is very strict. To each his own..

Answer 2

This selector translates exactly to what you're asking:
ul#vertical_menu > li
If your markup is always going to have one level of li elements under that ul, and/or only the ID is only going to be assigned to ul and not some other type of element (which it should be, for site consistency), there are a number of other ways to select the same elements, for example:
ul#vertical_menu li /* Assumes only one level of <li> */
#vertical_menu > li /* Assumes only this <ul> has the ID */
#vertical_menu li /* Assumes both of the above */
These alternatives are useful if IE6 support is a requirement, as it doesn't support the > combinator, but they all depend one way or another on the structure of your HTML.

Answer 3

Try this:
ul#vertical_menu > li{
border:1px;
}
It's worth noting that using the > selector doesn't work in older versions of Internet Explorer (IE6, I believe), so if you're looking also to support that,
ul#vertical_menu li
will also work (but it will apply the border to every list item under #vertical_menu even if its a submenu.

Answer 4

just make
ul#vertical_menu li{
border:1px solid #CCC;
Remember to use ul as it will make the css specificity more clear and it will style only the li items which are under the ul.
hope it will work for you.

Answer 5

#vertical_menu > li { border: 1px solid black; }
Should work, but IE6 will need
#vertical_menu li { border: 1px solid black; }

Answer 6

Both answers are correct. While ul#vertical_menu li targets all lis from ul#vertical_menu, ul#vertical_menu > li targets only first line li descendents.
For example, using the last selector only the id=one li will be targeted:
<ul id="vertical_menu">
<li id="one"></li>
<another-element>
<li id="two"></li>
</another-element>
</ul>