Styling only the previous level of a nested unordered list

lindaroyal

New Member
I wonder if it is possible to style only the previous level of a nested list. To see what I mean, please look at this fiddle:http://jsfiddle.net/MYasJ/In the fiddle I could achieve desired effect by overriding the nested list \[code\]backgroun-color\[/code\] property, however this is not what I want -- in my specific circumstances, the parent list has image as a background, the 1st level \[code\]li\[/code\] elements should have red background, but the elements of the nested list should be again transparent so that the background of the "root" list is visible. In the fiddle I use green color instead of picture, but I hope you get the idea.There are several questions on SO, for example here, but they either cover different topic or the solution involves overriding the children properties -- but this does not solve my case.EDIT: Little elaboration: the problem is because the nested list is contained within the parent \[code\]li\[/code\] element. This has some good reasons (for example if you float the parent element, the nested list will be floated with it), but also the result that you cannot (at least I do not see how, this is my question) style the \[code\]li\[/code\] element only. I had some luck with \[code\]:first-line\[/code\] pseudo class but this obviously does not work on multiline items nor does it span the whole width of the \[code\]li\[/code\] element.
 
Back
Top