0
wp_enqueue_style( 'style', THEMEROOT . '/css/style.css' );
wp_enqueue_style( 'responsive', THEMEROOT . '/css/responsive.css' );

I am using the above method to enqueue stylesheet, but what I want is not achieved.

Whatever I write in responsive.css should be prioritized(that means CSS written here should override everything else written in style.css.), but that is not happening. Is there a way to achieve it through something that WordPress provide?

Update →

the whole idea is not to use !important, but still when the website is loaded in smaller screens than responsive.css should dominate or override style.css without using any !important tag.

7

If you want to make sure the second stylesheet loads after the first, you can use the third argument of wp_enqueue_style to set a dependency, eg:

wp_enqueue_style( 'styles', THEMEROOT . '/css/style.css', array() );
wp_enqueue_style( 'responsive', THEMEROOT . '/css/responsive.css', array('styles') );

As for having all the styles in responsive.css override style.css, that is going to entirely depend on the specificity of the targeting in each stylesheet, CSS being a Cascading Style Sheet, it would be worth researching exactly what that means if you aren't fully sure how it works.

  • what does this means → As for having all the styles in responsive.css override style.css, that is going to entirely depend on the specificity of the targeting in each stylesheet – The WP Intermediate Oct 18 '17 at 13:42
  • @TheWPNovice What janh2 wrote. In general, the more specific rule wil be applied, no matter which was first. body > div > .child will rather be applied than .child – kero Oct 18 '17 at 13:44
  • after implementing this , array('style') the responsive.css doesn't even load. !important is not a great practice. – The WP Intermediate Oct 18 '17 at 13:45
  • 1
    that's very strange, this is common practice I have this working fine in many places... maybe try changing the style handle in both places for something else and add an empty dependency array to the first line (see edit.) – majick Oct 18 '17 at 13:53
  • @TheWPNovice Yes !important is not a great practice, there's a lot more to CSS specificity than !important. The issue here is clearly just incorrect CSS. Please research specificity. – Jacob Peattie Oct 18 '17 at 23:42
3

Generally, what is loaded later will take prevalence if both are similar in their specificity, e.g. body { background-color: white; } body { background-color: black; } will lead to a black background-color, while body.myclass { background-color: white; } body { background-color: black; } will result in a white background if body has the class myclass.

You can use three ways: load the overriding styles later, make them more specific or add !important after the attributes that you want to override, e.g.

body {
    background-color: white !important;
}
body.myclass {
    background-color: black;
}

will get you a white background. You can easily find out which one is loaded first by looking at your document source. If that is in the right order (if it isn't, tell WP that your responsive.css requires the original css and WP will make sure it's in the right order), make sure that your overriding styles are at least as specific as your original styles. If that is the case as well, make sure that your original style doesn't use !important for the attributes you want to override.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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