Any way to attach specific CSS styles to specific groups?

Question

I have li already styled in a stylesheet. I need it to stay a specific style. It is styled without using a class, so for example .selectors{width:50px;} li{ padding:10px; }

Now i have run into a problem. I am trying to style the li again, without any classes like what i have in the example code. For example .options {width:30px;} li{ padding:50px; }

What i was wondering is, is there any way to attach certain elemnts to another element. I'm not sure if this is making any sense, but I am trying to have one LI only be applied to a certain part of the page, and the second be applied to another part of the page. Is this possible without using classes? I can't modify the code or add classes otherwise the script doesn't work. Can someone help if I am making any sense at all.

Answer 1

A very common way to do this is

#content li { ... }
#sidebar li { ... }

so the li will behave differently inside two different elements with different IDs. Say, if content is a div, and sidebar is a div, then the li will behave differently inside these two divs.

It is also possible to be "within a class":

.items-to-watch-out-for li { ... }

This is a good way to avoid "too many classes", which is called "classitis", like in this article:

http://www.ehow.com/how_2284990_classitis-html-css-descendant-selectors.html

Answer 2

It's never going to be the nicest way if you can't add classes.

Potentially if the uls are in the same container you could try:

ul:first-child li {}

This will allow you to style the first ul however you want then the generic:

ul li {}

Will take care of the second.

This method should work in all browsers apart from IE6.

http://www.quirksmode.org/css/contents.html#t17

動靜能量 solution is the ideal way.