Child theme css not overriding parent

5
votes

I've created a child theme of the twentyseventeen theme. In the child's theme folder I have a "style.css" and a "functions.php" file. Inside of the style.css file I have:

/* 
Theme Name: Personal_theme
Theme URI: http://wordpress:8888/
Description: This is a child theme of twentyseventeen
Author: My name
Author URI: ...
Template: twentyseventeen
Version: 0.1;
*/

.entry-title {
    color: blue;
}

and inside of functions.php:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-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' );
?>

If I add "!important!" to the style, it works, it turns blue. If I use the inspector tool, I can see that the child stylesheet is being loaded after the parent, but the style is overwritten by the parent. I'm new to Wordpresss, is any of the parameter's in the functions.php wrong? Something I have to change?

3
phpcsswordpressparent-child
It's probably a specificity thing. developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Michael Coker
shouldn't $parent_style = 'parent-style'; be $parent_style = 'twentyseventeen-style';? From the documentation For example, if the parent theme is twentyfifteen, by looking in its functions.php for its wp_enqueue_style() call, you can see the tag it uses there is 'twentyfifteen-style'. codex.wordpress.org/Child_Themes – MitchBroadhead
I solved this by using PHP_INT_MAX as described in this answer – sfmiller940

3 Answers

4
votes

This problem is most likely caused be CSS selector specificity. Essentially, the parent css rule is more narrowly tailored to hit that element than the rule you're assigning. You can get your css to take over by using rules that are more specific than the parent css, or use the same rules, in which case yours will take priority, as it is loaded later.

1
votes

Try updating your function to 

<?php
    function my_theme_enqueue_styles() { 
      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') );
    }

    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Afterwards please provide a screenshot of what is actually being loaded in your console.

Not sure why you created a variable of the parent-style, but you can keep using that of course.

Hope this helps

0
votes

Try adding

 @import url("..twentyseventeen/style.css");

above .entry title at the top of your child stylesheet. This is required along with your Template name. Hope this helps.