Can only override parent theme styling with '!important' in child style.css

Question

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'twentytwentyone-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('twentytwentyone-style')
    );
}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

When I add styling changes to the child theme style.css file, I can see them listed in chrome dev tools, but crossed out and overridden by parent styling. I've only been able to override parent styling by adding !important to the child styling changes. How can make styling changes without !important, or is this the only way to make styling changes?

Answer 1

From the looks you've enqueued everything correct: Set the parent style as dependency, this way WordPress should first load the parent style and then the child style.

However, it can still happen that your rules are not applied, this is usually happening due to a rule being more specific. See this MDN article for more information.

As a solution, you can make your rules be more specific:

// parent
.main-content .mydiv

// child
body .main-content .mydiv
// or
.main-content .someclass .mydiv