1

I have a css that will be assigned to a class, let's say .button, but exclude the class that has id #id1 and #id2. I use 

.class:not(#id, #id2) { background: #f46b45; }

This works on Chrome. But once I open on Safari, the style background: #f46b45; is assigned to all button with class .button.

I have not checked on the other browsers. How can I make the exclusion work?

Ben Harson
  • 15
  • 2

3 Answers3

1

According to MDN, only simple selectors in the :not are widely supported.

The or selector (x, y) isn't "simple".

Try

.class:not(#id), .class:not(#id2) { … }
Richard
  • 106,783
  • 21
  • 203
  • 265
  • "The or selector" is not even a selector. (I know that's what jQuery calls it, but seriously, it's not.) Also, the right way to expand :not(#id, #id2) is :not(#id):not(#id2). Oddly enough, :not(#id), :not(#id2) is actually the expansion of :not(#id#id2). – BoltClock Mar 25 '17 at 15:57
  • @BoltClock true, but given no element can have two ids they work out the same (class selectors however). And `:not(#id1#id2)` cannot match anything. (The CSS standard calls the comma a list selector, but it does an or operation. – Richard Mar 25 '17 at 16:21
  • Not in the HTML DOM I guess. You have it backwards - it's "selector list", not "list selector", but I realize we're splitting hairs at this point (since the entire prelude of a style rule is, indeed, called the "selector", when really it consists of a selector-list). – BoltClock Mar 25 '17 at 16:48
1

Yo can use,

.class:not(#id1):not(#id2):not(#id3) { color: green; }

Hope this will help you.

LIJIN SAMUEL
  • 883
  • 4
  • 12
1

Solution with example compatible on all browser with latest version:

HTML:

<ul class="mylist-inline">
        <li class="menu">Example1</li>
        <li class="menu">Example2</li>
        <li class="menu">Example3</li>
        <li class="menu">Example4</li>
        <li id="custom-setting" class="menu">Button</li>
</ul>

Add this css:

.mylist-inline {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.mylist-inline .menu:not(#custom-setting){
  background: #ccc none repeat scroll 0 0;
  display: inline-block;
  padding: 10px 15px;
}
#custom-setting {
  background: red none repeat scroll 0 0;
  border-radius: 5px;
  color: #fff;
  max-width: 200px;
  padding: 15px 20px;
  text-align: center;
}

See the result.. Hope this will help you!!!

Sangrai
  • 687
  • 1
  • 6
  • 19