0

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

Improve this question
9
  • Yes there is. :not() Commented Jun 10, 2016 at 11:43
  • So how would I do that in this case Commented Jun 10, 2016 at 11:44
  • why don't you just not include the masthead div on the homepage (or rename it? Not rocket science... Commented Jun 10, 2016 at 11:46
  • #masthead:not(.home-page-masthead) { /* styles */ } Commented Jun 10, 2016 at 11:47
  • i can't find where to edit the html on homepage on wordpress twenty sixteen theme so am trying to get around that Commented Jun 10, 2016 at 11:48

1 Answer 1

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

No problem. Please acknowledge that the question has been solved so that others may take advantage of this solution, too! :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.