2

I'm using the Shapely theme.

I'm enqueueing my child theme's stylesheet like so:

function my_theme_enqueue_styles() {

    $parent_style = 'shapely-style'; //

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

And in my page source, my child theme style is definitely loading AFTER the parent in the <head>.

<link rel='stylesheet' id='shapely-style-css'  href='http://mydomainname.com/wp-content/themes/shapely/style.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://mydomainname.com/wp-content/themes/child-theme-name/style.css?ver=4.7.3' type='text/css' media='all' />

However, when inspecting my page, my parent styles are still overriding my child theme styles. See below screenshot:

enter image description here

1 Answer 1

6

That's because your parent theme's CSS has a higher specificity.

If you replace .post-title with the same selector the parent theme is using (.post-content .entry-content .post-title) it will override the parent settings. Not because it has a higher specificity but because it comes after the same selector, so it wins out.

Specificity values of posted selectors:

.post-title = 0 0 1 0

.post-content .entry-content .post-title = 0 0 3 0

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.