Question

Let’s say I have this table:

<table class="live_grid">
    <tr>
        <td>
            <h3>Something!</h3>
        </td>
    </tr>
</table>

If I want to style the <h3> within the table, I can use this CSS selector:

.live_grid h3 {

}

This works fine. The trouble pops up if I want to style all headings in that table. I have tried this:

.live_grid h1,h2,h3,h4,h5,h6 {

}

This seems to match headings that are not within my table with the class of live_grid.

I’m sure this is a simple problem and right in front of me. Can you point out what I’m doing wrong?

Answer 1

Modern Option

Note: it may not be compatible with older browsers:

.live_grid :is(h1,h2,h3,h4,h5) {
    /* style here */
}

See here for more information about :is(): https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Standard Option:

If you want to style all the headers in that class, you have to do it like this (which could also be done without the line breaks). Notice each selector has .live_grid in it:

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
    /* style here */
}

When you comma separate things, they’re independent of each other – hence the need to reference the class again.

For example:

#myDiv1, .live_grid, #myDiv2 {
    color: blue;
}

This would set the text-color for everything in the #myDiv1 element, everything in the #myDiv2 element, and everything in the .live_grid element to having text color blue.

This also explains the reason your CSS is matching all the headers – you’re referencing them individually, separated by commas – there is no selector for their containing element(s).

---

CSS pre-processor option

Or, you can always go with something like LESS or SASS which allows you to write nested rules something like this:

#live_grid {
    h1, h2, h3, h4, h5, h6 {
        /* style here */
    }
}

---

Custom class option

Lastly, you could add a class to all of your headers and just refer to that class:

<-- HTML -->
<h1 class="custom-header">Title of Blog Post</h1>
<h2 class="custom-header">Subtitle of Blog Post about Pizza</h2>

/* CSS */
.custom-header {
    /* style here */
}