How can I avoid css properties herence

Forum Moderators: not2easy

Message Too Old, No Replies

How can I avoid css properties herence

asantos

2:19 pm on Sep 14, 2006 (gmt 0)

I have this:
_____________


<ul>
 <li>Test 1
 <ul>
 <li>Whats up</li>
 <li>Hi</li>
 </ul>
 </li>
 <li class="sel">Test 2
 <ul>
 <li>My name is Roger</li>
 <li>Tralala</li>
 </ul>
 </li>
</ul>

_____________

And this:
_____________


ul li {
 color: blue;
}
ul li.sel {
 color: red;
}

_____________

What i need is the "My name is Roger" and "Tralala" <li's> to remain blue.

So the question is, how can i avoid herence?

penders

4:03 pm on Sep 14, 2006 (gmt 0)

What i need is the "My name is Roger" and "Tralala" <li's> to remain blue.

In the code you've given they do (IE6, FF)!

I don't think you can avoid inheritance. As I've heard someone say around here, 'use it'!

icantthinkofone

4:24 pm on Sep 14, 2006 (gmt 0)

Unless he means making it a link and keeping it blue after it's visited. In which case:

a:visited{color:blue}

benihana

4:25 pm on Sep 14, 2006 (gmt 0)

[removed] as prior post edited[/removed]

asantos

4:33 pm on Sep 15, 2006 (gmt 0)

mmm i dont mean visited. ill try another way around, since its impossible to beat inheritance.

SuzyUK

4:50 pm on Sep 15, 2006 (gmt 0)

to echo Penders.. with the code you've given they are doing what you asked?
Are you sure you don't have some other parts to the code you're not showing us?

I have a feeling that you don't need to beat inheritance, but you might need to use specificity to overrule a previous ruleset for the nested list?

something like...
e.g.
ul li, ul li.sel li {
color: blue;
}
ul li.sel {
color: red;
}

asantos

5:03 am on Sep 18, 2006 (gmt 0)

You said it right : "overrule" hehe