CSS Heading Style Problems

Question

I feel like the answer to this question is probably very simple, but I'm honestly struggling with this.

I have a web page in which all heading will need to be blue, so I added this to my stylesheet:

h1, h2, h3, h4, h5, h6 {
color: blue;
}

However, on the same page there will be 5 different divs, in which the heading color will need to be different so I tried this:

#divname h1, h2, h3, h4, h5, h6 {
color: green;
}

However, it's making all headings on the page green, not just the headings in the div. Perhaps my CSS abilities are still a little rusty, but what am I doing wrong here. The website I'm editing is fairly old and has some archaic CSS applied to it, could it just be conflicting with the old CSS somehow?

Thank you!

Answer 1

Try

#divname h1, #divname h2, #divname h3, #divname h4, #divname h5, #divname h6 {
  color: green;
}

Answer 2

It's difficult to say for sure without seeing the rest of the CSS, but this is one problem:

#divname h1, h2, h3, h4, h5, h6 {
color: green;
}

Change it to this:

#divname h1, #divname h2, #divname h3, #divname h4, #divname h5, #divname h6 {
color: green;
}

Each bit inside the commas is evaluated separately. In the first version, you were selecting all h1s inside #divname, and all h2s, and all h3s, and all h4s, et cetera.

Answer 3

The comma starts a whole new tag name, so you'll have to do this:

#divname h1, #divname h2, #divname h3, #divname h4, #divname h5, #divname h6 {
  color: green;
}