Stylesheet overriding in Child theme

Question

So here's my problem : I have two stylesheets in my child theme : style.css and style-premium.css (Which contains only modified CSS). My posts use one of these stylesheets depending on their category.

I want style-premium.css to override style.css the same way a Child theme's stylesheet override the Parent theme's one (add the modifications, but keeps non-modified CSS).

I don't know if it changes something, but style.css also contains only modified CSS (All other CSS from parent theme is imported by @import).

I don't know if it is clear (English is not my native language...). If you got questions to help me, just ask!

Hope you can help...! :)

Answer 1

Generally speaking, you want to load your general stylesheet (style.css) first and follow it with your more specific stylesheet(s) (style-premium.css). However, the actual details of how CSS cascades are more complex than that and your specific stylesheet can still be overridden by the general stylesheet:

• if the !important declaration is used
• based on the specificity of individual selectors

You can learn more about how the cascade works via W3.org or this CSS tutorial, which even deals with your question directly:

It's also useful to note that external stylesheets placed underneath each other also cascade — that is, the styles in the lowest stylesheet overrides those in the higher stylesheets.