How to override styles from child theme if all the styles are in a folder?

Question

In my situation, style.css file has just package information and a comment as: All css files are placed in /css/ folder.

In the css folder, I see a bunch of different styles and I don't exactly know which one controls what!

Any suggestions on overriding the CSS rules from a child theme?

Answer 1

As long as your theme has been set up properly for child themes, it doesn't matter how many style sheets there are or where they are located in the actual theme. The style.css in the child theme directory will prevail over them.

If it isn't set up properly you can re-enqueue with a different priority.

If you can't do that, then you can make your css selector more specific (ie, .header h1 instead of just h1) and/or add !important to the value.

Answer 2

if these styles are correctly registered and enqueued in parent theme, you can dequeue and deregister in function.php of child theme

//Dequeue foo-style
function dequeue_foo_style() {
    wp_dequeue_style( 'foo-style' );
    wp_deregister_style( 'foo-style' );
}
add_action( 'wp_print_scripts', 'dequeue_foo_style' );