Question

Cannot work this one out. My headers from h2 through to h4 are white in color instead of black. Everything seems to work is it should when removing color: white; from a class that isn’t even being used on the page (but is in the stylesheet):

.right_content_default h1,h2,h3,h4,h5,h6 {
    color: white;
}

The only thing I can think of is a possible syntax issue, but I can’t locate it in the stylesheet.

Here’s the fiddle: jsfiddle

Answer 1

Your selector is looking for "h1 inside .right_content_default, or any of h2, h3, h4, h5, h6". Nothing it telling it to only apply the white colour to headings inside that class name, other than h1.

The correct CSS is:

.right_content_default h1, .right_content_default h2, .right_content_default h3,
.right_content_default h4, .right_content_default h5, .right_content_default h6 {
    color:white
}

But in some browsers you can do this:

.right_content_default :matches(h1,h2,h3,h4,h5,h6) {color:white}