How Do You Override CSS With A Child-Theme Wihtout "!Important"

Hello,

very often when I want to change styles in the X-Theme with my Child-Theme, I have to use !important, even though I use the exact same selectors.

For instance, I tried to remove the boxes around the widgets in the sidebar on my page using the Integrity 1 stack. I wasn’t able to do that, without the use of !important in my CSS code. This works of course, but it makes the code very ugly. Shouldn’t there be a way to do this with child theme without the use of !important?

Hi there,

Thank you for reaching out to us, It actually depends on a situation which type of CSS you’re trying override, an inline CSS, on page CSS (internal) or a style that is written in a separate file (external). For the inline CSS you must define !important rule in the child theme otherwise your CSS won’t work, however for the internal and external CSS there are ways to do it, you can checkout the following threads https://stackoverflow.com/questions/9956467/overriding-styles-without-important or https://stackoverflow.com/questions/18825301/override-css-style-behaviour-without-using-important-or-inline-style-sheet

Hope this helps!

1 Like

Hi!

Thank you! I think I got it working with this now!

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.