When trying to override styles from Divi, or other Plugins, it can sometimes be difficult — especially if the CSS rules you’re trying to override already have an !important on the original CSS.
In those cases, just adding an !important to yours doesn’t always work. This is where specificity comes into play. If you’re unfamiliar with how CSS priority works, I recommend checking out the links below.
Note: !important isn’t always required to override something. Sure, it’s sometimes an easy way to do it, but it’s not always required.
In fact, it’s rarely needed, unless the CSS you’re trying to override already had !important on it (proof). All you really need to do is be more specific with your CSS rule.
Learn even more about this topic here: CSS Specificity: Things You Should Know.
Here’s a quick visual way to learn about CSS specificity:
In addition to the specificity of CSS rules, it’s also important to keep in mind that the way in which CSS is added also affects its priority.
For example:
- An external .css stylsheet has less priority than…
- An internal <style></style> set of CSS.
Of which both have less priority than… - An inline style=”” element.
That’s part of what the “C” in CSS is referring to — Cascading.
