Simple CSS specificity rule guide

There are a few ways to apply CSS styling rules to an element. Each one is less or more specific than another. Applying a rule using a class selector when you’ve applied a different rule using an ID selector won’t work.

Batificity isn’t the CSS specificity guide you deserve, but the one you need right now, and it looks great. However, the rules can be summarized more quickly and more easily.

ID selectors are more specific than class name selectors, which are more specific than attribute selectors, which are more specific than pseudo elements and their selectors. An type selector rule is the least specific of all, because it won’t match a specific element on its own. Inline styles, applied on an element using the style="" attribute, is the most specific type of assignment.

In short,

#id > .class > [href] > :before > article > inline styles

Don’t use IDs for styling

A quick tip: don’t use ID selectors. If you’re targeting elements using JavaScript, don’t use ID selectors either, because they can only be used once on a page. (Use data- attribute selectors for functionality.) By doing so, you can apply CSS styling just using class names, and avoid many specificity headaches.

Important…

Oh… and if you’re using !important in your CSS, you’ve got a logic problem in your code which needs to be sorted out. !important is the gaffer tape of CSS.