What's the default order used by Wordpress to load CSS files?

Question

I am working with a commercial theme on which I am making some style changes. Specifically, the parent theme shows a menu which I want to modify. The code for that menu is:

 <div class="mobile-navigation hidden-md hidden-lg">
        <div id="close-menu-moblie">
            <a href="#">
                <i class="icon-close icons"></i>
            </a>
        </div>
   <div class="mobile-menu-container">
        <ul id="menu-menu-movil" class="nav-menu mobile-menu">
            <li id="menu-item-4723" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-4723 active">
                <a href="/" aria-current="page">La Familia</a>
            </li>
            <li id="menu-item-4724" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4724">
                <a href="/tierras.html">La Tierra</a>
            </li>

So I created a child theme and added some CSS to it in its style.css file:

#menu-menu-movil li > a {
    font-weight: 500;
    font-family: Poppins, Arial, sans-serif;
    }

No way: the site ignores my changes. When I inspect the HTML I see that the browser is applying instead CSS instructions from the parent theme that target different classes:

.mobile-navigation .nav-menu > li > a {
    font-size: 16px;
    color: #1a1a1a;
    font-weight: bold;
    text-transform: capitalize;
}

So I think that it's a problem with conflicting CSS instructions and their level of specificity or whatever... but then I try opening the CSS editor in WP Admin at "Appearance / Customise / Additional CSS" and pasting there my changes... and they work.

This led me to think: is there a default order in which Wordpress loads CSS from all the possible places where they can be? ("Additional CSS", child themes, parent themes...). I seem to remember that there was, but after searching around on Google for a while I couldn't find anything. Or is my problem in the end about CSS specificity?

Answer 1

WordPress does not dictate the order in which stylesheets are loaded. When themes and plugins enqueue styles they can tell WordPress when to load their styles in two ways:

The first way is by declaring a dependency on another stylesheet. This is done by passing the handles for those dependencies as the 3rd argument to wp_enqueue_style(). In this example, the child-style stylesheet will always be loaded after parent-theme:

wp_enqueue_stylesheet( 'child-style', get_stylesheet_uri(), [ 'parent-style' ] );

The other way is setting the priority of the callback function in which the assets are enqueued when hooking it into wp_enqueue_scripts with add_action(). In this example, the stylesheets enqueued by parent_enqueue_assets() will be enqueued before the stylesheets enqueued by child_enqueue_assets():

add_action( 'wp_enqueue_scripts', 'parent_enqueue_assets', 10 );
add_action( 'wp_enqueue_scripts', 'child_enqueue_assets', 15 );

Note that a lower number is a higher priority, and 10 is the default priority if one is not declared explicitly.

The issue you are experiencing is likely caused by the parent theme and child theme both enqueueing their stylesheets without declaring dependencies or explicitly setting a priority. When this happens stylesheets are all enqueued at priority 10 in the order that the code runs, and the code for child themes runs before the code for parent themes.

The most straightforward solution to your issue is likely to just increase the priority (by which I mean lower the priority number) of the function that enqueues your child theme's assets.