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.
You need:
.body-content > ul li { ... }
This will only select list items that are direct descendants of a ul in .body-content.
Edit: Ooops, wrong place for the > !
Edit: Sorry, also should have mentioned - child selectors don't work in IE6.
I would then ZERO out the .body-content .col-middle li { }'s AFTER styling the .body-content li { }'s
Your only other option is to specify where the li is going to be:
.body-content .li-block li { }
Restyle the col-middle.
div.body-content li {
color: red;
}
div.col-middle li {
// overrides stuff
color: black;
}
Styles cascade on down from parent elements to their children.
You should use, which will put the style only for the sons li of .body-content
.body-content > ul li {}
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.
The code you tried specifies how list items ONLY inside .body-content should look, even if they are inside .col-middle.
Using CSS2 there isn't any way to do what you want, appart from specifying how list items outside .col-middle should work, and then specifying how they should be styled inside .col-middle.
Using CSS3 however, you can do something like this:
:not(.col-middle) li{}
Note that this does not work in any IE browsers.
The example below seems to work the best (I've added some extra markup to demonstrate this), but I'd recommend styling .body-content and then override those styles in .col-middle. It would be the most cross-browser compatible.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.body-content > *:not(.col-middle) li {
color: red;
}
</style>
</head>
<body>
<div class="body-content">
<div class="col-middle">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>