1

I'm working on a site for a client that wants to use a specific background color site-wide EXCEPT on one page that's basically used as a separate 1-page website with unique content & styling.

My question is this... how can I apply a CSS style to all BUT a specific page ID?

My CSS currently looks like this:

.et_section_regular, #main-content {background-color: #F5EFE5 !important}

The !important is there because I'm having to override the themes default background color to begin with. I've tried using the following not: selector (referenced here) with no luck:

.et_section_regular:not (.page-id-714 .et_section_regular), #main-content:not(.page-id-714 #main-content) {background-color: #F5EFE5 !important}

Is what I'm trying to do even possible?

Community
  • 1
  • 1
Nathan Duvall
  • 15
  • 1
  • 4
  • Show us some of the HTML as well. Not sure what the structure is you are working with. – disinfor Jun 07 '14 at 20:13
  • 1
    Don't use `!important` in that situation. (Better don't use it at all - IMO every thing can be solved without it). Go with stronger selectors. Your overriding rules would need to be as "selective" as the strongest `!important` rule and must be defined after that. IMO, `not()` is not necessary: `.page-123 .class .class {...}` should be enough. – try-catch-finally Jun 07 '14 at 20:18

1 Answers1

2

DEMO

You cannot choose selectors that are above the selection where you apply :not()

An alternative is to first mention parent selection where your page id is applied then target the inner div's - Check the demo.

CSS:

section:not(.page-id-174) .et_section_regular,
section:not(.page-id-174) #main-content{
    background-color: #F5EFE5 !important
}

Note i am using section tag just for the DEMO but you can use body tag - where i assume you have your .page-id-174 applied

Imran Bughio
  • 4,811
  • 2
  • 30
  • 53
  • Thank you for the reply! I tried this, replacing "section" with "body" and wasn't able to make it work, either in your demo or on my site. So maybe body won't work there? body:not(.page-id-174) .et_section_regular, body:not(.page-id-174) #main-content{background-color: #F5EFE5 !important} – Nathan Duvall Jun 08 '14 at 00:33
  • Thanks again all for the feedback. I finally gave up trying to do it this way and just created a new page template and styled it that way. Hopefully this little thread will be helpful to someone else down the road though - maybe someone smarter than me that can figure out how to implement Imran's suggestion. – Nathan Duvall Jun 08 '14 at 01:10
  • there was no need to create different template you could have used the power of hierarchy checmk my [answer revision 1](http://stackoverflow.com/posts/24101175/revisions) – Imran Bughio Jun 08 '14 at 06:09
  • I have just confirmed my current solution works even with body tag... you must be having some other issue. – Imran Bughio Jun 08 '14 at 06:13
  • Yeah, it's just an issue with the particular theme and structure I'm using (Elegant Themes Divi). By targeting the templateid I was able to simplify this and avoid having to use the :not. Thank you for your time, will definitely bookmark this for later! – Nathan Duvall Jun 08 '14 at 21:49