Jack Jack - 5 months ago 12
CSS Question

Applying CSS to one page only

I need to apply CSS to the masthead on all pages except the homepage in the Wordpress Twenty Sixteen theme. At the moment I am manually doing it like:

.page-id-24 #masthead {
padding: 5%;
background-image: url(...);
background-size: 1400px 500px;
height: 10px;
margin-bottom: 5%;
}

.page-id-14 #masthead {
padding: 5%;
background-image: url(...);
background-size: 1400px 500px;
height: 10px;
margin-bottom: 5%;
}


Is there any way I can write something like
#masthead not:(home) {...}
to drastically speed up the process and change the masthead on all pages except the homepage.

Thanks,

Jack

Answer

Welcome to StackExchange!

It's a good thing you've mentioned "Twenty Sixteen" as your theme. I was able to pull up a demo of your theme on wordpress.org and identify an acceptable selector for your purposes. Please consult the following:

body:not(.home) #masthead { /* Stylish */}

This selector should work out for you.

http://codepen.io/anon/pen/LZGmLV

The way the :not() selector works is that it's treated as a pseudo class that can take in a simple selector to negate. In our case, we're looking for an element (more specifically, your <header> element) with the "masthead" ID that's only on the home page. Additionally, we're using this selector to exclude from our style.

.

Suggested Further Reading:

https://developer.mozilla.org/en-US/docs/Web/CSS/:not