...">
Clever Geek Handbook

Style list items in a specific div

I have a div structure like below:

<div class="body-content">
  <div class="col-middle">

  </div>
</div>

What I want to do is set the styling on the list items in the body-content class and make sure it doesn't apply to anything within the col-middle

I thought it would be something like ...

.body-content li { }

but it applies these styles to list items inside col-middle too.

+2


source to share


7 replies


The simplest and most reverse option:

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

You might be able to use a child selector:

div.body-content > ul li

but it is not supported in IE6.



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

If possible, change the markup to:

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

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

+3


source


I would then make ZERO out of .body-content.col-middle li {} AFTER styling the .body-content li {}

The only other option is to specify where the li will be:



.body-content .li-block li { }
+1


source


You need:

.body-content > ul li { ... }

This will only display list items that are direct descendants ul

of .body-content

.

Edit: Ooops, wrong place for>!

Edit: Sorry, should have also mentioned - child selectors don't work in IE6.

0


source


Restore col-middle.

div.body-content li {
  color: red;
}

div.col-middle li {
  // overrides stuff
  color: black;
}

Cascade styles down from parent elements to their children.

0


source


You should use which will put the style for sons only li.body-content

.body-content > ul li {}
0


source


The code you tried specifies how the list items ONLY inside .body-content should look like, even if they are inside .col-middle.

With CSS2, there is no way to do what you want, appart from defining how list items outside of .col-middle should work and then specifying how they should be styled inside .col-middle.

Using CSS3, you can do something like this:

:not(.col-middle) li{}

Please note that this does not work in IE browsers.

0


source


The example below seems to be the best (I've added some additional markup to demonstrate this), but I would recommend styling .body-content

and then overriding those styles in .col-middle

. It would be compatible with most browsers.

<!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>
0


source






More articles:


All Articles