Child themes CSS priority problems without using !important

I changed my WordPress site to use child themes, but the parent theme style has priority over any change I make on the child theme CSS. I can work around it using !important, however this is a patchy solution and the child themes should work as the site’s first resource.

For example, in my site, the border that includes .wp-caption is the same color as the background using the !important tag, but won’t work without it.

Does this have to do with the functions.php file?

This is the contents of my PHP file:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Try enqueuing your child theme’s CSS like so:

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

Notice a few things:

1) PHP_INT_MAX as priority so that this runs last

2) get_stylesheet_directory_uri() vs. get_template_directory_uri() which will point to the child theme’s template folder instead of the parents.

I added a subfolder there, as well /styles/ because I keep my CSS in a subfolder of my theme normally.

3) followed by array( 'parent-style' ) to make the child CSS have the parent CSS as a dependency, which has the effect of putting the parent theme first in the head and the child theme CSS following it. Because of that, whatever also appears in the child theme that is already in the parent theme will overwrite the parent theme’s version.