0

I have my main theme's (WP) CSS file that have a ton of elements that use ids and classes like so:

#et-boc .et_pb_text  {
    color: #FFF;
}

Then I have a bunch of CSS from a plugin that uses only classes. Like so:

.nc_tweetContainer.swp_facebook {
color: #000;
}

Because of ids getting precedence, the theme's CSS always "wins". However, if in the console, I put something like #page in front of a bunch of the plugin's CSS like:

#page .nc_tweetContainer.swp_facebook {
    color: #000;
    }

Then all of my styles in the plugin and theme are perfect. The problem is that this plugin updates regularly, so if I update the CSS in there, it'll get overwritten each time there's an update. I don't want to copy every line of it and make another sheet (for basically the same reason).

Is there some other way to handle this problem?

jonmrich
  • 4,233
  • 5
  • 42
  • 94
  • I'm not going to write this as an answer [not sure if its what your looking for] but try `!important` in your css. Here are MDN docs => https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity and also https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean –  Sep 20 '18 at 02:06
  • Apart from !important, give the html or body tag an id, say id="root", then do #root #page .yourclass {...} and so on, two ids is pretty high. – Stickers Sep 20 '18 at 02:12

0 Answers0