Adding a :NOT selector to a CSS request

Question

I have a class:

li:before {
  margin: 0 5px 0 -15px;
  color: #005984;
  content: "■";
}

But I don't want it to apply if it is contained by an elements with class="k-list"

<ABC class="k-list">
    not applied here
</ABC>

How do I add a :NOT to the above css?

Anonymous · Accepted Answer · 2015-03-17T13:56:49.753

0

The best way would be to override whatever was added to the element if it is contained by an element with the class .k-list:

li:before {
  margin: 0 5px 0 -15px;
  color: #005984;
  content: "■";
}
.k-list li:before {
  display: none;
}

If, for some reason, you want to make sure that at least one of the higher elements in the DOM does not have the class k-list (including html and body):

*:not(.k-list) li:before {
  margin: 0 5px 0 -15px;
  color: #005984;
  content: "■";
}

If you knew where you wanted to start such a search, however, it could be more specific and useful:

body *:not(.k-list) li:before {
  margin: 0 5px 0 -15px;
  color: #005984;
  content: "■";
}

The above CSS would exclude any elements that are not contained by the body element from meeting the *:not(.k-list) condition.

edited Mar 17 '15 at 13:56

answered Mar 16 '15 at 20:30

Anonymous

11,748
6
35
57

2

You should add "answers a duplicate question" to your profile :-D – TylerH Mar 16 '15 at 20:35
@TylerH Really? People can answer whatever they want.. everyone answers duplicate questions. – Josh Crozier Mar 16 '15 at 20:37
@JoshCrozier It was a light-hearted joke. – TylerH Mar 16 '15 at 20:37
@TylerH Point taken. I just figured I hadn't answered one in a while, so eh. It's not like there is an amass of good questions circulating. – Anonymous Mar 16 '15 at 20:37
1

@Anonymous Sure, like I told Josh, it was a joke; we can't expect people to be intimately familiar with every topic and tag and question asked before. The only reason I knew it was a dupe is because I focus on [tag:css] and related tags. No worries. – TylerH Mar 16 '15 at 20:41
That's not what this selector means. This selector means "there is *at least one* element further up in the DOM *without* the class". This is almost guaranteed to match something for every `li` element in the DOM, at least either `html` or `body`, unless those two elements happen to have the class as well for some reason. It's not clear to me why the OP accepted this answer, as it couldn't possibly have solved their problem unless they literally have a page where the class appears on every single ancestor in the hierarchy. – BoltClock Mar 17 '15 at 03:43
I would suggest replacing the descendant combinator with a child combinator, but the fact that the question presents the element with the class as an arbitrary "ABC" type element suggests that this element appears at an arbitrary nesting level in the DOM and not as a parent of the `li` element (otherwise, it would have been a `ul` or an `ol` or a `menu`), so that wouldn't work either. – BoltClock Mar 17 '15 at 04:24
@BoltClock You are absolutely right. Let me fix that. – Anonymous Mar 17 '15 at 13:36

Adding a :NOT selector to a CSS request

1 Answers1