why does CSS get inherited 2

[1DMF]

Can someone tell me why I apply CSS to an unordered list with ul li { } , the nested ul li inherits the CSS

so I have to then create css code for ul li ul li { } to switch off the formating?


thanks 1DMF


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ChrisHunt]

Because

ul li { color: red; }

Means "apply this CSS to an <li> that is somewhere within a <ul> element" (which, of course, is all <li>s if your code is valid). The <ul> does not need to be at the top level of the document, the <li> does not need to be its direct descendent, this (invalid) code would still trigger the CSS:

<ul>
   <div>
      <li>I'm red</li>
   </div>
</ul>
[code]
(it might not do so in practice, depending on how individual browsers try to make sense of that code. That's why we validate!)

It'll be triggered here too:
[code]
<ul class="menu">
  <li>I'm red</li>
  <li>
    <ul>
      <li>So am I</li>
    </ul>
  </li>
</ul>

Both <li>s are inside a <ul>, so both trigger the CSS. Changing the CSS to [tt]ul.menu li {}[/tt] won't help either, they're both inside that ul.

If you want the inner <li> to have different properties to the outer ones, you have to come up with a rule that applies only to <li>s contained within other <li>s. Hence

  ul li li { color: blue; }

Does that make sense?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

Or you can use child selectors

For example, to effect only the direct child li's of a ul with a class.menu
I think this will work...

ul.menu>li { color:blue; }

There are other selectors of this type, it's worth taking a quick google.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[1DMF]

ah of course the child selector, good move!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Just because I know you like to read, I included some good info on selectors in general:

http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/

-- article has three parts

http://css.maxdesign.com.au/selectutorial/

-- nice tutorial

http://www.w3.org/TR/REC-CSS2/selector.html

-- W3 on selectors

 

[1DMF]

too kind too kind

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.