Why won't child theme's style.css override plugin's css

Question

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):

Answer 1

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 { ...... } 

Answer 2

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.)

Answer 3

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.

Example:

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/