How to make CSS property not overridden?

Question

I installed a plugin in my Wordpress site, and the plugin has a CSS like this

.tab {
   border: 1px solid #ccc;
   position: relative;
}

and my Wordpress theme also has a css:

.tab {
   height: 50px;
   font-size: 12px;
}

So the plugin is also using the "height" & "font-size" in the theme css.

How to avoid this? The plugin is not supposed to have the style from the theme. I was trying to change the plugin css name from "tab" to "xxxxtabs" but there is a lot of code changes in php then, so I gave up because I don't want to mess up things. I think there must be a way to change a few lines in the css code instead?

I think you might want `!important`: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Ben Jackson, Nov 02 '13 at 00:13

score 2 · Answer 1 · answered Nov 02 '13 at 01:19

2

maybe you can add the parent class/id to the plugin's css selector like:

#parentidname .tab {}

or

.parentclassname .tab {}

answered Nov 02 '13 at 01:19

huda

146
1
7

How to make CSS property not overridden?

1 Answers1