Stopping CSS inheritance?

HTML & CSS
1

How can I stop inheritance from trickling down from parent to child?

For instance, if I want to highlight a list item that has a nested unordered list beneath it, how can I select just the list item. I.e.,

<ul>
<li id=“I want to bold this list item”>
<ul>
<li id=“but not this one”></li>
</ul>
</li>
</ul>

Thanks!

2

Hello

This should work :)

The CSS

li.bold {font-weight: bold;}

and

The HTML

<li class="bold">list item info</li>

Hope it helps :) and Happy Holidays ! :D

Johnny
3

I tried this, but the child elements inherit the bold style. I’m trying to style just the single <li> in the first <ul> and nothing beneath it.

Thanks!

4

I think you would have to change the styles of the li’s manually…


    ul li.style ul li
    {
      font-weight: normal;
    }
    

which would stop all the li's from inheriting bold.
Edit:

actually… you could remove the final li from that css rule.


     ul li.style ul
     {
       font-weight: normal;
     }
5

No, I’m talking about nested unordered lists underneath the styled <li> element. When I style the <li> using a “bold” class the style gets passed to the nested <ul>.

6

just updated the above post.

7

I think I’ve fixed it. I had to declare my style this way:

ul li#bold>a:link, ul li#bold>a:visited {
font-weight: bold;
}

8

ul li#bold>a:link, ul li#bold>a:visited {
font-weight: bold;
}

That won’t work in Ie I’m afraid as IE doesn’t understand the child selector. You need to do it how Daniel mentioned above.

e.g.


ul li#bold ul a
	 {
	 font-weight: normal;
	 }

Paul

9