CODEWITHSUNDEEP
cssselector
Paul
Paul

Reputation: 1614

CSS nested :not() selector

I want to apply a set of css rules to all (One) lists within my #content div, but these can NOT be allowed to affect the (Two) lists in the additional div.

<!DOCTYPE>
<html>
    <head>
        <style>
        #content *:not(div) ul {list-style:none;}
        </style>
    </head>
    <body>
        <div id="content">
            <ul>
                <li>One</li>
            </ul>
            <div>
                <ul>
                    <li>Two</li>
                </ul>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 406

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

For this specific scenario you could use

#content > ul {list-style:none;}

This will target direct children of the #content element

Upvotes: 2

Zach Snow
Zach Snow

Reputation: 1044

You probably want the "child" or "descendent" selector, which matches only those elements on the right right of the selector > that are immediate children of elements matching the left. If I understand you correctly you want:

#content > ul { list-style: none; }

Upvotes: 1

Related Questions