CODEWITHSUNDEEP
htmlcss
Get Off My Lawn
Get Off My Lawn

Reputation: 36311

Affect elements NOT in div

I can not get this to work, I would like the following style to only affect <ul> elements that are NOT inside the div#canvas element. I thought that this would work, but it doesn't.

:not(div#canvas) ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

So, for example the first list should NOT have bullets, while the second and third one (the ones within the div) should have bullets.

<ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ul>
<div id="canvas">
    <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <div>
        <ul>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 421

Answers (3)

Borre Mosch
Borre Mosch

Reputation: 4564

The following selector should have worked if the :not() selector supported all possible selectors as its argument:

:not(canvas ul){
    list-style-type: none;
    padding: 0;
    margin: 0;
}

However, as per the specification, the argument passed to the :not() selector may only be a simple selector, which is then specified here. Therefore, what you are trying to accomplish is impossible using a single css selector. The following is a little more verbose, but it would work:

ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#canvas ul {
    list-style-type: disc;
    padding-left: 40px;
    margin: 16px 0;
}

Upvotes: 1

user934902
user934902

Reputation: 1204

/*parent*/body > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

this will effect immediate children (all the uls that arent nested in other divs)

http://jsfiddle.net/t3Xyc/1/

OR

you could just apply a custom rule the the specific ul element you are trying to style

ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
}

div#canvas ul {
 /*Custom style Here*/
}

Upvotes: 1

Laurent S.
Laurent S.

Reputation: 6946

This should work : 

div:not(canvas) ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

Upvotes: 0

Related Questions