CODEWITHSUNDEEP
htmlcsscss-selectors
Ian Vink
Ian Vink

Reputation: 68740

CSS Not Selector for all children

I'm trying to apply a style to all li items as long as that item is not anywhere in a container with a class of .k-widget

.c-w1 ol li :not(.k-widget) { list-style: decimal outside; }

However the style continues to be applied. The .k-widget is on a div that contain divs that contain the actual li I don't want styled.

<div class="k-widget">
   <Lots of Things>
      <li> ....

Upvotes: 2

Views: 4978

Answers (3)

Abraham P
Abraham P

Reputation: 15471

The problem is that the :not() selector on a parent will match if any parent matches, and since all li elements are within both body and html, all li elements will match.

I would recommend constructing two styles, one overriding the other.

 .c-w1 ol li { list-style: decimal outside; }

And

 .c-w1 .k-widget ol li { override style here }

Upvotes: 1

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

Should be something like that:

div:not(.k-widget) .c-w1 ol li {
    list-style: decimal outside;
}

Of course the :not() has to be applied on the div which is before the li as allready stated by Marijke Luttekes.

Also have a look at caniuse for browser support of css3 selectors.

Another possibility would be to tell the .k-widget contents to inherit its styles with list-style: inherit;. So you can override it without using a specific value and adding redundance to your styles:

div .c-w1 ol li {
    list-style: decimal outside;
}

div.k-widget .c-w1 ol li {
    list-style: inherit;
}

Upvotes: 4

Marijke Luttekes
Marijke Luttekes

Reputation: 1293

Currently the list style is applied to any item inside a li that does not have the class .k-widget applied. If I understand your problem correctly, you can easily fix this by placing the statement :not(.k-widget) before li.

Upvotes: 1

Related Questions