How to make .class:not(#id, #id2) work on all browsers? [duplicate]

Question

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?

Richard · Accepted Answer · 2017-03-24 09:09:35Z

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) { … }

answered Mar 24, 2017 at 9:09

Richard

110k21 gold badges214 silver badges279 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BoltClock Over a year ago

"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).

Richard Over a year ago

@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.

BoltClock Over a year ago

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).

LIJIN SAMUEL · Accepted Answer · 2017-03-24 09:24:11Z

1

Yo can use,

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

Hope this will help you.

answered Mar 24, 2017 at 9:24

LIJIN SAMUEL

8934 silver badges12 bronze badges

Comments

Sangrai · Accepted Answer · 2017-03-24 09:55:36Z

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!!!

Collectives™ on Stack Overflow

How to make .class:not(#id, #id2) work on all browsers? [duplicate]

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related