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.

Leave a comment

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This website uses cookies in order to provide you with the best possible experience when using the website. Privacy policy.