How to get child style.css to load last rather than second behind parent style.css?

Question

My parent style.css is loading first, followed by my child style.css then the numerous stylesheets from the parent theme load third and so on and so forth. The head currently looks like this:

<link rel="stylesheet" id="parent-style-css" href="http://localhost:8888/wp-content/themes/proland/style.css?ver=4.5.3" type="text/css" media="all">
<link rel="stylesheet" id="child-style-css" href="http://localhost:8888/wp-content/themes/proland-child/style.css?ver=4.5.3" type="text/css" media="all">
<link rel="stylesheet" id="bootstrap-css" href="http://localhost:8888/wp-content/themes/proland/css/lib/bootstrap.min.css?ver=1.0" type="text/css" media="all">
<link rel="stylesheet" id="bootstrap-touchspin-css" href="http://localhost:8888/wp-content/themes/proland/vendors/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css?ver=1.0" type="text/css" media="all">
//////// more stylesheets loaded here

The functions.php in the child theme currently looks like this:

<?php
  function my_theme_enqueue_styles() {
    $parent_style = 'parent-style';

    wp_enqueue_style ( $parent_style, get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'child-style',
      get_stylesheet_directory_uri() . '/style.css',
      array ( $parent_style )
    );
  }
  add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 10000 );
?>

There are 2 style.css in the parent theme.

• ./style.css (just with commented header information,) which is loaded first.
• ./css/style.css (contains styling,) which is loaded 10th out of all the scripts.

The functions.php in the parent theme enqueue all the scripts like so

function proland_scripts() {

    wp_enqueue_style( 'bootstrap',                      get_template_directory_uri() . '/css/lib/bootstrap.min.css', false, '1.0');
    wp_enqueue_style( 'bootstrap-touchspin',            get_template_directory_uri() . '/vendors/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css', false, '1.0');
      // ETC.
      // ETC.
      // ETC.

}

function my_enqueue_styles() {

  /* If using a child theme, auto-load the parent theme style. */
  if ( is_child_theme() ) {
      wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css' );
  }

  /* Always load active theme's style.css. */
  wp_enqueue_style( 'style', get_stylesheet_uri() );
}

Why is the child style.css loading second and not last after the numerous stylesheets that are enqueued in the parent theme functions.php file?

Answer 1

If the dependency array contains the IDs of all the other stylesheets, then yours should load last.

Try adding the other stylesheets to the array when you enqueue your stylesheet:

wp_enqueue_style ( 'child-style',
  get_stylesheet_directory_uri() . '/style.css',
  array ( $parent_style, 'bootstrap', 'bootstrap-touchspin' )
);