Stylesheets not overriding one another correctly

  • focksbot

    (@focksbot)


    7 years, 5 months ago

    I am trying to enqueue stylesheets so that I have extra code for a particular category of pages:

    function theme_enqueue_scripts() {

	wp_enqueue_style( 'parent-style', get_template_directory_uri() . 'style.css' );
	wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_template_directory_uri() . 'style.css' );
    if ( in_category( 'poem' ) ) { wp_enqueue_style( 'poem-style', get_stylesheet_directory_uri() . '/poemstyle.css' ); }
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

    When I look in the dev console, the poemstyle.css is queued last, as it should be.

    However, the styles in this stylesheet are being overridden by the styles in style.css, unless I add ‘!important’ to them.

    What do I do now to give poemstyle.css priority?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Joy

    (@joyously)

    7 years, 5 months ago

    What you need is more like this:

    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('twentysixteen-style'), '1.0' );
if ( in_category( 'poem' ) ) { 
  wp_enqueue_style( 'poem-style', get_stylesheet_directory_uri() . '/poemstyle.css', array('child-style') );
}

    But the page right now is loading the poem style twice, so you must have it somewhere else also.

    • This reply was modified 7 years, 5 months ago by Joy. Reason: oops, forgot to change the child style function
    Jacob Peattie

    (@jakept)

    7 years, 5 months ago

    You need to learn how Specificity works in CSS. CSS uses the specificity of a rule to determine what styles to apply. The order that the styles are loaded is only one small part of that. You can learn how specificity is calculated at that link, or this guide from CSS-Tricks.

    The problem is that the CSS selectors you’ve used in poemstyle.css are not more specific than the the other stylesheets. You won’t be able to make a whole file more specific though, it comes down to individual rules. So you’ll need to update the selectors in your poemstyle.css stylesheet to be more specific. Refer to my links to see how to do that.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Stylesheets not overriding one another correctly’ is closed to new replies.