How can I override a selector with many negatives (: not)?

Question

For example, to create standard inputs, I write something like:

input:not([type="checkbox"]):not([type="radio"]) { background-color: blue; } 

However, this significantly increases the specificity, so if I want to override it with a class, I should do something like:

 .red.red.red { background-color: red; } 

Is there a way to reduce the specificity of the original input selector without changing the functionality?

Answer 1

Unfortunately, in Selectors 3, the best thing you can do is because :not() accepts only one simple selector. Having said that, the selector in your overriding rule can be replaced with input.red.red - you do not need more class selectors than attribute selectors if this rule should not appear earlier in the stylesheet.

This is another problem solved by Selectors 4 with its improvement :not() : specificity. In Selectors 4, you can replace all these negatives with just one alias :not() , effectively reducing its specificity in the original selector by only one attribute selector. From section 16 :

The specificity of the a: not () pseudo-class is replaced by the specification of the most specific complex selector in its selection list argument.

Since any attribute selector is equally specific to a class selector, the specifics of any number of single attribute selectors in the list will never be more than one of them. This allows you to avoid using only one class for your redefinition without repetition.

The following works in Safari as proof of concept:

 /* 1 type, 2 attributes -> specificity = (0, 2, 1) input:not([type="checkbox"]):not([type="radio"]), 1 type, 1 attribute -> specificity = (0, 1, 1) */ input:not([type="checkbox"], [type="radio"]) { background-color: blue; } /* 1 type, 1 class -> specificity = (0, 1, 1) */ input.red { background-color: red; } 

 <input type="checkbox"> <input type="radio"> <input type="text"> <input class="red" type="text"> 

Answer 2

This may cause specific issues:

 input:not([type="checkbox"]):not([type="radio"]):not(.red)) { background-color: blue; } .red { background-color: red; } 

 <input type="checkbox"><br> <input type="radio"><br> <input class="red">