Can the :Not() Pseudo-Class Have Multiple Arguments

Can the :not() pseudo-class have multiple arguments?

Why :not just use two :not:

input:not([type="radio"]):not([type="checkbox"])

_{Yes, it is intentional}

Can't add multiple pseudo-classes to a :not() pseudo-class

Multiple classes selectors to :not is only supported in CSS selectors level 4 and it doesn't work in all browsers. It currently only works in Safari, instead you could use multiple :not

.div-list div:not(:last-child):not(:first-child) {
  border:1px solid blue;
}

Check the browser support doc

Multiple classes inside :not()

You can use:

div:not(.one):not(.three) {
    color: #F00;
}

Fiddle

:not pseudo class not working with more than one element

The reason why .myList li:not(:nth-child(9)), .myList li:not(:nth-child(11)) applies to all the elements, is because 9 and 11 are both in at least 1 condition.

The the 9th is not the 11th child so the css applies and vice versa

In you case, you simply want to do

.myList li:not(:nth-child(9)):not(:nth-child(11)) {
    background-color: greenyellow;
}

So that it selects anything that is not 9th or 11th

CSS specificity of :not() pseudo class

It's not just you; this is indeed one of the fundamental pitfalls of specificity as a CSS concept.

A simpler solution that is equally valid would be to repeat your .ticker class selector so you have this:

#column .ticker.ticker ul {
    margin: 0;
}

This way you do not have to modify your element to add an extra class just for the sake of increasing selector specificity.

The spec verifies this:

Note: Repeated occurrances of the same simple selector are allowed and do increase specificity.

On a side note, remember that the specificity of the :not() pseudo-class is strictly defined (in the same section of the spec) as equal to that of its argument. So :not(#id) and #id have the same specificity, and likewise for :not(E):not(.a) and E.a. The :not portion does not count at all, not even as a pseudo-class.

This limitation in specificity will be addressed in Selectors 4, which enhances :not() to accept a comma-delimited list of selectors. The specificity of a :not() that contains a selector list will be that of the most specific selectors in the list, so the specificity of ul:not(.c, .d) is equal to 1 type selector and 1 class selector, compared to ul:not(.c):not(.d) which is equal to 1 type selector and 2 class selectors. This makes it tremendously useful in excluding any number of classes from a match.

Is it possible to use pseudo-elements with the :is() pseudo-class?

No you cannot.

Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is(). ^ref

---

Related Topics