:Not() Selector Not Behaving the Same Between Safari and Chrome/Firefox

div {  display: inline-block;  width: 80px;  height: 80px;  border: 4px solid black;}
div:not(.a.b) {  background-color: green;}

<h3>div { ... }: select all divs</h3><h3>.a.b { ... }: select all elements with both classes .a and.b </h3>
<h3>If we combine the two using :not() The first two boxes should be green</h3>

<div class="a"></div><div class="b"></div><div class="a b"></div>

Advanced element selector with element prefix does not work in Chrome

:not() only takes a "simple" selector according to the spec.

You can use the classic CSS approach of giving two rules, with the second overriding the first if applicable:

div[class*="element-"] + div[class*="element-"] {
  margin-left: 1%;
}

div[class*="element-"] + div[class*="element-"][class*="element-offset-"]) {
  margin-left: 0;
}

CSS not working in Safari, but in Chrome and other browsers it does

You need to remove background-attachment : fixed not supported on the safari , check it here Can I use , last parameter of background css key is an attachment

CSS3 :not negation pseudo-class not fully supported by Firefox?

In CSS the comma (,) separates selectors. It's not a selector itself so it can't be used inside a selector. So depending of if you want to apply the rule to

• paragraphs that are not .class1 and paragraphs that are not .class2,
• paragraphs that have neither .class1 nor class2 or
• paragraphs that don't have .class1 and .class2

it's

p:not(.class1), p:not(.class2) {
}

or

p:not(.class1):not(.class2) {
}

or

p:not(.class1.class2) {
}

BTW, IMHO it's better to avoid :not if possible and in this case, for example, have a general rule that applies to all ps (with the properties you want to set in the :notrule) and one that applies to ones with the class and overrides the properties of the first rule if necessary.

Is it ok to use the CSS3 selector :not()

The one that is safari only says

Selectors Level 4 allows the :not() pseudo-class to accept a list of
selectors, which the element must not match any of. Selectors Level 3
only allowed :not() to accept a single simple selector. Thus,
:not(a):not(.b):not([c]) can instead be written as :not(a, .b, [c])

Which means this form :not(a, .b, [c]) can be used oppose to this form :not(a):not(.b):not([c]) but only within safari

http://caniuse.com/#feat=css-sel3 tells us

Advanced element selection using selectors including: [foo^="bar"],
[foo$="bar"], [foo*="bar"], :root, :nth-child(), :nth-last-child(),
nth-of-type, nth-last-of-type(), :last-child, :first-of-type,
:last-of-type, :only-child, :only-of-type, :empty, :target, :enabled,
:disabled, :checked, :not(), ~ (general sibling)

Which means we can use all of those selectors including :not() in any browser, well all major and updated browsers.

hope that clears it up.

Does :not() negation accept descendant selectors?

In Selectors Level 3, the answer would be NO. The :not() notation accepts only simple selectors.

6.6.7. The negation
pseudo-class

The negation pseudo-class, :not(X), is a functional notation taking
a simple selector (excluding the negation pseudo-class itself) as an
argument. It represents an element that is not represented by its
argument.

What is a simple selector?

From selector syntax:

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Nothing about a descendant selector.

HOWEVER, in Selectors Level 4, :not() accepts complex selectors, which would include descendant combinators. Browser support is still quite weak for this specification.

---

Related Topics