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 Reply

Your email address will not be published. Required fields are marked *

For security, use of Google’s reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

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