CSS selector for multiple sub-elements - css

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 */
}

Answer 2

.live_grid h1,
.live_grid h2,
...
you get the idea

Answer 3

Unfortunately, you'll need to target each heading separately, or just assign a class to it.
.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
}
I would just assign a class to the heading, or be specific about which headings you actually want to target.

Answer 4

Try this one:
.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {}

Answer 5

The code
.live_grid h1,h2,h3,h4,h5,h6 {}
will only select the h1 that is with in .live_grid. Use
.live_grid h1,.live_grid h2,.live_grid h3,.live_grid h4,.live_grid h5,.live_grid h6 {}
From Adam Roberts' "Selector Grouping":
We can think of the comma as a logical OR operator, but it’s important to remember that each selector in a group is autonomous. A common beginner’s mistake is to write groups like this:
#foo td, th {
⋮ declarations
}
A beginner might think that the above declaration block will be applied to all td and th elements that are descendants of the element with an ID of "foo". However, the selector group above is actually equivalent to this:
#foo td {
⋮ declarations
}
th {
⋮ declarations
}
To achieve the true goal, write the selector group as follows:
#foo td, #foo th {
⋮ declarations
}

Answer 6

each heading tag has to be qualified:
.live_grid h1, .live_grid h2, .live_grid h3, .live_grid h4, .live_grid h5, .live_grid h6

Answer 7

That's one of the things that sucks about CSS. If you want CSS to suck less you can use http://sass-lang.com/ and it will look like:
.live_grid {
h1, h2, h3, h4, h5, h6 {
/* styles here */
}
}

Answer 8

.live_grid h1,
.live_grid h2,
.
.
.
.live_grid h6 { //now add your style here }

Answer 9

Another solution could be to add a special class for every h element you want to your html markup, and then, in your CSS, you can write somthing like this:
.live_grid .myHeader
{
/* your styling */
}