Child Theme not overriding Parent CSS

Question

I've created a child theme of the Renovation theme. In the child's theme folder I have a "style.css" and a "functions.php" file. My style.css looks like this:

/*
Theme Name: Renovation Child
Theme URI: http://renovation.thememove.com/
Author: ThemeMove
Author URI: http://thememove.com/
Version: 2.0.4
Template: tm-renovation
*/

/*
 * @charset "UTF-8";
*/

.vc_custom_1438936121266 {
    margin-bottom: 70px!important;
    padding-top: 65px!important;
    padding-bottom: 35px!important;
}

My functions.php looks like this:

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// BEGIN ENQUEUE PARENT ACTION

if ( !function_exists( 'renovation_enqueue_scripts' ) ):
    function renovation_enqueue_scripts() {
        wp_enqueue_style( 'renovation-child-style', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css' );
    }
endif;
add_action( 'wp_enqueue_scripts', 'renovation_enqueue_scripts' );

// END ENQUEUE PARENT ACTION

Unsing the inspector I see that the parent css is being loaded first and it looks like this:

.vc_custom_1438936121266 {
    margin-bottom: 70px!important;
    padding-top: 30px!important;
    padding-bottom: 35px!important;
}

My CSS is being loaded after the parent CSS and it looks like this, except it's all crossed out:

.vc_custom_1438936121266 {
    margin-bottom: 70px!important;
    padding-top: 65px!important;           <-- MY CHANGE
    padding-bottom: 35px!important;
}

I've read alot of threads about specificity, and I noticed that my css and the parent css are identical, except for the "padding-top" change I made. Since the child is loaded last, I expected my css to take precedence, but it's not. My css is crossed out in the inspector and the parent is being used.

This doesn't seem right to me, and I was hoping that someone could clarify my understanding of the parent/child relationship and help me fix this problem. Thank you.

Are they loaded in the correct order in the head of the page? Because it's true that the latest css style is applied — Kartik Prasad
As far as I can tell they are loaded in the correct order, with my css being loaded last. — csharpMind

Kristina Darroch Kristina Darroch · Accepted Answer · 2017-12-04T23:47:13

if you are only going to override one element and not apply this to multiple it might be best to use an id instead of a class. The id is always overwrites a class.

Child Theme not overriding Parent CSS

1 Answers