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.
article > inline styles
Don’t use IDs for styling
data- attribute selectors for functionality.) By doing so, you can apply CSS styling just using class names, and avoid many specificity headaches.
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.