I am using my own child theme for twentyeleven, and I've made some changes to some plugin's css classes in my child style.css. The problem I'm having is that if I add a new css attribute to a class from the plugin's css, then it will make the change. But, if the attribute is already declared in the plugin's css, it relies on that.

How can I make my child theme's style.css take precedence over the plugin's css files?

Here's an example of what happens from firebug (the first css file is from the plugin, the second is from my child theme):

enter image description here

  • 1
    Are they definately included in that order, if you check the source of the page are you seeing the plugin stylesheet followed by your own, i can't personally see any reason what you have shouldn't work, though i suppose if necessary you force the style with !important (yeah not ideal i know).
    – t31os
    Commented Dec 14, 2011 at 1:13

3 Answers 3


I suggest that you use specificity to do this. Right now both rules are of equal value. What div holds the div "product?" If the Div is called "wrapper" your code could look like this:

body div.product div.images img {
  • or just adding the body tag should work to Commented Dec 14, 2011 at 2:02
  • could you expound on that?? Commented Dec 14, 2011 at 6:26
  • did this work at all for you? I can explain more if you would like. Commented Dec 14, 2011 at 6:29
  • I can't figure out which div holds the "product" div... the page is bolistylus.com/shop/boli-2 Commented Dec 14, 2011 at 6:56
  • just add body to the beginning of the css rule. see if that works. I edited it the way it should look ^ Commented Dec 14, 2011 at 6:59

Some plugins has also Inline CSS . check the source code of the page . Anyhow - You have several ways to resolve this .

1 . use the ( !important ; ) property in CSS.

 p { color: #000000 !important; }

2 . add a function to deactivate the plugin css

add_action( 'wp_print_styles', 'k99_deregisterr_plugin_css', 100 );

function k99_deregisterr_plugin_css() {
    wp_deregister_style( 'name of plugin  style' );
       // add here more lines to deregister other css ...

2.a My solution is usually to COPY all plugin´s the stylesheet css to my own css , and then just delete or rename it (or deregister - see above) .

Having a unified css will also save on http requests.

(This however will not be a solution for ALL production websites, because a client triggered upgrade could cause problems.)


You could add a 3rd parameter to the code which loads your themes style sheet so its loads after all plugins and remove the default action which loads your themes style sheet before your plugins.


add_action( 'wp_enqueue_scripts', 'add_stylesheet', 999 );

For Genesis users, here's a tiny plugin which does the job http://wordpress.org/plugins/genesis-style-trump/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.