can I use CSS to effect an elements siblings

want to effect the 5th or 6th occurence of an element

[icpooreman]

Hey I've got a css menu bar made with unordered lists and I'm looking to change a property on the sixth or seventh <li> (and all the following <li>) and was wondering if that's possible without adding a class or id to the element.

My sub-categoies that popout on the menu bar are long and right now will scroll off my page when you expand the menu bar so after a certain amount of elements in my list I want move the next element to the top of the next column instead of it expanding off the page.

so for example I have my unordered list
<ul>
<li> </li>
<li> </li>
... (4 or 5 more)
<li>is it possible to specify this element in the sylesheet </li>
<li> and all remaining elements </li>
</ul>

[createErrorMsg]

wondering if that's possible without adding a class or id to the element

I hate to bear bad news, but the answer is no.

In IE, your options for styling within the cascade are limited to the decendant selector [w3.org] (element1 element2 = targets any instance of element2 nested anyhere within element1), which styles all LIs anywhere within a given element.

In other browsers, the options are more robust, but not to the level of control you're after. For instance, FF and Opera support the child selector [w3.org] (element1 > element2 = targets element2 IF it is an immediate child of element1), which targets only the direct child of an element (all LIs nested in the element, but not any LIs nested in anything else nested in that element).

They also support the adjacent sibling [w3.org] selector (element1 + element2 = targets element2 IF it is within the same parent as, AND preceeded by, element1), which is the closest you can get to what you're after. This selector targets an element that has the same parent as, and immediately follows, another element.

So you could use it in your application by adding an ID to the 4th LI, then adjacent sibling-ing it from there....

html:
...
<li id="fourth">...</li>
<li>...</li>
<li>...</li>
<li>...</li>

css:
li#fourth + li, #fourth + li + li, #fourth + li + li + li {color:red;}

...but if you have a lot of LIs following that key one, the CSS is going to get long and complicated (note how I've had to keep tacking an extra adjacent selector (+ li) for every list-item; that's because the adjacent selector only targets one element immediately following another). And then, of course, there's the fact that IE doesn't support those selectors at all.

Bottom-line: If you want this effect to persist cross-browser, I'm afraid classes and/or ids are the only way to go.

cEM