When inspecting what code currently applies on a particular element, Chrome also tells you what specific selector applies that rule and where it's coming from. All you need to do is write a stronger selector and it will apply. In your example, body:not(.template-slider) #Header { }
will be overridden by...
body.page:not(.template-slider) #Header {/* CSS here */ }
Ideally, though, it would be best to not have to increase the specificity of current selectors, but apply your rules last, using the same selectors. The easiest way to do that is to add your CSS
at the end of your active theme's style.css
, unless your theme/WP installation is messed up.
By the way, if you're using a theme you haven't developed yourself, your active theme should be a child theme. This is important, but it's something you should look into separately as per why it's important, what are the benefits and how to do it.
If writing to style.css
of your active theme (by far, the recommended WordPress way) is not an option, you can always put all your CSS into a separate stylesheet of your choice (i.e. my-custom-style.css
), placed in your active theme's folder, and register it using the following code in functions.php
of your active theme:
function add_styles_to_your_active_theme() {
wp_enqueue_style (
'my-custom-style',
get_stylesheet_directory_uri() . '/my-custom-style.css',
array(),
null
);
}
add_action( 'wp_enqueue_scripts', 'add_styles_to_your_active_theme' );
After adding it and making sure it loads, you can modify its position in the <head>
tag by specifying other registered stylesheets as dependencies of yours, using the third parameter in the above call to wp_enqueue_style()
.
You need to place handles of other registered scripts into that array. You can find the handles by looking into the <head>
tag of any page, finding the last loaded <link rel="stylesheet" />
tag and removing the ending -css
from its id
. For example, if your last loaded styleheet's link id is some-theme-style-css
, the third parameter of your call to wp_enqueue_style()
should be array('some-theme-style')
.
After that, check the <head>
tag again and make sure yours is last. If not, add each <link />
's id
to the $deps
array, stripping -css
, until yours is last. When your stylesheet loads last, you can copy-paste any applying selectors to it, change the rules to whatever you want and they will apply.
But do note that, under normal usage conditions, the method described above is unnecessary. Normally you should use a child theme, put your CSS
in its style.css
and not have to worry about tricky details like this, reserved for theme and plugin creators.