Eliminate CSS from being applied to child list items

Question

I have the following HTML structure building out my menu:

<div id=”navigation”>
<ul>
    <li class=”level1”>Top Level Menu item
        <div class=”sublevel”>    
            <ul>
                <li class=”level2”>Second Level Item1
                    <ul>
                        <li class=”level3”>Third Level Item1</li>
                        <li class=”level3”>Third Level Item2</li>
                        <li class=”level3”>Third Level Item3</li>
                    </ul>
                </li>
<li class=”level2”>Second Level Item2
                    <ul>
                        <li class=”level3”>Third Level Item4</li>
                        <li class=”level3”>Third Level Item5</li>
                        <li class=”level3”>Third Level Item6</li>
                    </ul>
                </li>
            </ul>
        </div>
    </li>
</ul>
</div>

In CSS I am applying a style to the level 2 class like so:

#navigation .level1 ul li {
background: #acacac;
padding-bottom: 40px !important;
border-radius: 10px;
position: absolute;
}

The problem is that this is applied to all the child menu items as well. How can I specify to only apply this to the level2 items and not the level3?

I have attempted a variety of > and + flags per CSS docs, but no luck.

why doesn't `#navigation .level1 ul li.level2` fit your conditions? — Joseph Marikle, May 16 '14 at 14:22

score 2 · Answer 1 · answered May 16 '14 at 14:20

Simple, just use the :not() rule

#navigation .level1 ul li:not(.level3) {
  background: #acacac;
  padding-bottom: 40px !important;
  border-radius: 10px;
  position: absolute;
}

More on :not() from MDN

The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.

score 1 · Accepted Answer · answered May 16 '14 at 14:20

1

You need to change the selector to use the direct child operator:

#navigation .level1 .sublevel > ul > li {

answered May 16 '14 at 14:20

Rory McCrossan

331,213
40
305
339

score 0 · Answer 3 · answered May 16 '14 at 14:20

0

Try this:

#navigation .level1 .level2 li {
background: #acacac;
padding-bottom: 40px !important;
border-radius: 10px;
position: absolute;
}

answered May 16 '14 at 14:20

Milind Anantwar

81,290
25
94
125

you forgot a `.`, bro, and this doesn't work. it will select the `.level3` `li`s and completely exclude the `.level2` ones. – Joseph Marikle May 16 '14 at 14:25

Eliminate CSS from being applied to child list items

3 Answers3