Style list items in a certain div

css, html

Solution

The simplest and most backwards compatible option is:

div.body-content li { /* some style */ }
div.col-middle li { /* some other style */ }

You might be able to use the child selector:

div.body-content > ul li

but it's not supported in IE6.

Other than that, it depends on exactly how your markup is written and what your requirements with respect to browser support are.

If possible, change your markup to:

<div class="body-content">
  <div class="col-middle">
  ...
  </div>
  <div class="col-other">
  ...
  </div>
</div>

or something similar so you can easily distinguish between which list you want to style.

Problem

I have a div structure like the bottom: ``` <div class="body-content"> <div class="col-middle"> </div> </div> ``` What I want to do is set a style on list items within the body-content class and make sure it does not apply to anything within col-middle I thought it would be something like... ``` .body-content li { } ``` but it applies those styles to list items within col-middle too.

Original source