The CSS :not() selector

One of the best CSS tips I’ve come across in recent months is the :not() selector. Rather than having to define a set of rules for an element, then re-defining new rules for the element when it has a certain class or attribute, you can use :not() to be more specific in the first place. In my most-used cases so far, you can simply define the appearance of input fields excluding checkboxes…

input:not([type="checkbox"]) {border: 1px solid grey;}

…or excluding checkboxes and radio buttons…

input:not([type="checkbox"]):not([type="radio"]) {border: 1px solid grey;}

…in one fell swoop. If you’re using a multi-case implementation, such as the second example above, then simply concatenate the two :not() rules onto the same selector. Applying them separately causes a conflict and you’ll end up having specificity problems.

How about browser compatibility? No problem at all.

Addendum: you might run into specificity problems if you use this: input[type="button"] is less specific than input:not([type="checkbox"]), so styles applied using the latter rule will take precedence.

Hat tip: @emma_maria88.