Child theme stylesheet not always overriding "index"

Question

I'm using a child theme and I'm using a "styles.css" file to override things from the parent theme. My styles (there are many stylesheets) are enqueued like this:

function my_theme_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_stylesheet_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
    );

    wp_enqueue_style('shopkeeper-top-bar', get_stylesheet_directory_uri() . '/css/header-topbar.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-headers', get_stylesheet_directory_uri() . '/css/headers.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-responsive', get_stylesheet_directory_uri() . '/css/responsive.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-custom', get_stylesheet_directory_uri() . '/css/custom_artiq.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-navigations', get_stylesheet_directory_uri() . '/css/navigations.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-animate', get_stylesheet_directory_uri() . '/css/animate.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-app', get_stylesheet_directory_uri() . '/css/app.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-defaults', get_stylesheet_directory_uri() . '/css/defaults.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-easyzoom', get_stylesheet_directory_uri() . '/css/easyzoom.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-header-centered-2menus', get_stylesheet_directory_uri() . '/css/header-centered-2menus.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-idangerous-swiper', get_stylesheet_directory_uri() . '/css/idangerous.swiper.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-nanoscroller', get_stylesheet_directory_uri() . '/css/nanoscroller.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-offcanvas', get_stylesheet_directory_uri() . '/css/offcanvas.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-owl-carousel', get_stylesheet_directory_uri() . '/css/owl.carousel.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-owl-theme', get_stylesheet_directory_uri() . '/css/owl.theme.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-responsive', get_stylesheet_directory_uri() . '/css/responsive.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-select2', get_stylesheet_directory_uri() . '/css/select2.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-woocommerce-overwrite', get_stylesheet_directory_uri() . '/css/woocommerce-overwrite.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-fontawesome', get_stylesheet_directory_uri() . '/inc/fonts/font-awesome/css/font-awesome.min.css', array(), '1.0', 'all' );

    wp_enqueue_style('shopkeeper-styles', get_stylesheet_directory_uri() . '/css/styles.css', array(), '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

But if I change something in "styles.css" in the child theme and then use the inspector in Chrome for example, I see that the styles coming from "index" (root/wordpress/:385) prevail. I have to use !important in the stylesheet to see any change. How can I solve this and what exactly is this index?

Answer 1

wp_enqueue_style( $parent_style, get_stylesheet_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
);

Look closer, specifically at the URLs you passed to enqueue style:

• parent: get_stylesheet_directory_uri() . '/style.css'
• child: get_stylesheet_directory_uri() . '/style.css'

They're identical, they're the same file, that's the problem. Your child themes stylesheet isn't overriding the parent, because the parent is never loaded, your code never tells WP to load it.

Some notes:

• Use get_template_directory_uri to refer to the parent theme, and get_stylesheet_directory_uri for the child theme
• indent, indent, indent, you've not indented your arguments, this is important
• You declared the parent stylesheet as a dependency of the child, but you've already enqueued it, register the parent, then enqueue the child and it'll have the same impact
• You're using the theme version as the version for the stylesheet, but it would be more efficient to use the file modification time else you'll have to flush browser cache during development
• get_stylesheet_uri() returns the full path to the style.css so the .'/style.css' is unnecessary
• The $parent_style variable is unnecessary