Styling pages in a certain "category"

Have you tried looking at the source markup of the generated pages for any classes that you could use. Does your theme use the body_class() function, for example?

Hi esmi,

Thanks for your quick response. I use a custom child theme for the twentyeleven theme. I kept most of the classes in place.
If I understand you correctly you suggest to use custom classes for the different subject in for example the page div? How/where would I indicate when to use other colour set?
Where can I find the body_class function?

Thanks again, best,

you suggest to use custom classes for the different subject in for example the page div?

Twenty Eleven uses the body_class() function to generate a whole list of classes on the body tag of the generated pages. You can use these classes to target your new CSS at specific pages.

OK, esmi, thanks that pretty powerful!
So you can target the parent by using its page id like this:
.page-id-7 element {/*style*/}
And all the children:
.parent-pageid-7 element {/*style*/}
To target the classes at the same time like this:
.page-id-7 .parent-pageid-7, element {/* style */}

I’ll have to dive into the styling a little more but the basics are clear. Thanks again. Best, danielle

Hmm, I think I was a bit too optimistic with my styling results. The above code styles the element on _every_ page. I’m trying to work out how to target a specific element in for example page-id-7.
On the page there’s div element called logo. If I want to change properties of the div with the id logo how do I go about it? I’ve tried (among other things):

#logo.page-id-7 {
background-color: #000;
}
This is the logo in the css file:
#logo{
width:340px;
height:177px;
background-color:#66CCCC;
text-align:center;
padding:19px 0;
float:left;
}

But the background colour doesn’t change. FYI this is the link to the website: https://awarenesslab.nl/inspiratie/

Hope someone can put me on the right track, TIA, danielle.

Try using

.page-id-7 #logo {
    background-color: #XXXXXX;
}

You can’t combine a class and an id in a selector like that…

Hi WPyogi,
Thanks a lot, works like a charm. One more question. If I want to style both .page-id-7 and .parent-pageid-7 the same way is there a way of combining them? I’ve tried .parent-pageid-7, .page-id-7 #logo and .page-id-7, .parent-pageid-7 #logo but always only one works…

So can you combine classes or do I have to put everything twice in the css file?

Thanks very much in advance for your help, best, danielle.

OK, I had a brainwave, this is the answer:
.parent-pageid-7 #logo, .page-id-7 #logo{
background-color: #FF9933;
}
So you have to repeat both the class and other item. HTH someone. Cheers.