How can I give priority to one stylesheet over another on a Wordpress page template?

I'm using a wordpress child theme and I have two page templates, the default template and another one I've called full-page.php.

My style.css is already overriding the stylesheet from the parent theme, and given that full-page.php template only has a few differences, I want its stylesheet - full-page.css to use the css from style.css (both from the parent and child theme), and make the necessary overrides to its specific template where needed.

My problem is that currently, any css code I write into full-page.css will work on the the correct template - full-page.php, but only if nothing has already been specified in style.css.

For example, if I want to change the color of my header to red on my full-page.php template, background-color: red will work when added to full-page.css, but if I have already specified background-color: orange on my default template, style.css, it will override the full page one.

Using !important works but I'd rather avoid this as it could cause further problems later down the line. Is there any way I can give priority to full-page.cssand still allow it to keep using the default theme stylesheet and also the updates I've made in style.css?

<?php

 function my_et_enqueue_styles() {  

if (is_page_template('page-templates/full-page.php')) {

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'artwebsite-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'parent-style' ) );

}

else { 

     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

    
wp_enqueue_script( 'divi', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery', 'divi-custom-script' ), '0.1.1', true );


}

add_action( 'wp_enqueue_scripts', 'my_et_enqueue_styles' );

Solution

You need to have the stylesheet with the element with the same specificity you want to load last. ( https://www.w3schools.com/css/css_specificity.asp )

So make sure that your specific ( full-page.css ) loads after your style.css

You can do this by changing making the full-page.css be dependant of the other so they cascade here is an example taken from the answer ( here )

function add_all_stylesheets() {
  wp_enqueue_style( 'stylesheet-one', get_template_directory_uri() . '/css/stylesheet-one.css' );
  wp_enqueue_style( 'stylesheet-two', get_template_directory_uri() . '/css/stylesheet-two.css', array( 'stylesheet-one' ) );
  wp_enqueue_style( 'stylesheet-three', get_template_directory_uri() . '/css/stylesheet-three.css', array( 'stylesheet-two' ) );
}
add_action('wp_enqueue_scripts', 'add_all_stylesheets');

So in your child theme functions.php add:

add_action( 'wp_enqueue_scripts', 'my_childtheme_add_stylesheets' );

function my_childtheme_add_stylesheets() {
    wp_enqueue_style( 'my-child-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
    wp_enqueue_style( 'artwebsite-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'my-child-style' ) );
}