Shorthand For Styling Multiple elements In A Div?

[Planet13]

Hi everyone:

could have sworn there is a shorthand to style multiple elements in a div instead of writing out like this:

#three_fourths_text h1, #three_fourths_text h2, #three_fourths_text h3 {
color: #fbfbfb;
}

but for the life of me, I can't think of it.

thanks in advance.

[not2easy]

I think the secret is back just a few threads: [webmasterworld.com...]

[Fotiman]

First, I'd suggest always putting each selector on it's own line, like this:

#three_fourths_text h1,
#three_fourths_text h2,
#three_fourths_text h3 { 
  color: #fbfbfb; 
}

If I understand correctly, you're asking if there's a shorthand way to target all h1, h2, and h3 elements within the #three_fourths_text. The short answer is no, you need to fully qualify each selector.

However, some alternatives would be to assign a class to each of those items, and then simply define the styles for that class:

.three_fourths_text_headers {
  color: #fbfbfb;
}

<h1 class="three_fourths_text_headers">...</h1>
<h2 class="three_fourths_text_headers">...</h2>
<h3 class="three_fourths_text_headers">...</h3>

Another alternative would be to use a CSS preprocessor language, like Sass or LESS. The syntax is very similar to CSS, but the preprocessor generates the output CSS. For example:

#three_fourths_text {
  h1,
  h2,
  h3 {
    color: #fbfbfb;
  }
}

Which would then generate the CSS like your code above.

[Planet13]

@ not2easy:

Thanks, but I am not finding it there in that thread, so maybe I didn't articulate well what I was hoping to do.

@ Fotiman:

If I understand correctly, you're asking if there's a shorthand way to target all h1, h2, and h3 elements within the #three_fourths_text.

Yes! That is what I am trying to do.

I would like to style multiple h tag sizes (h1, h2, h3) of the same div with the same text color.

And I am actually looking for the PROPER way to do it (i.e., what the cool programmers / uber-nerds would do) and I thought there MIGHT be a better way to do it instead of explicitly stating them like this:

#three_fourths_text h1,
#three_fourths_text h2,
#three_fourths_text h3 {
color: #fbfbfb;
}

But if that IS the proper way to do it, then I am more than happy to do it.

I guess I was HOPING there would be a way to go like:

#three_fourths_text > h1, h2, h3 {color: #fbfbfb;}

or something like this:

#three_fourths_text h* {color: #fbfbfb;}

But I guess there ain't no way to do that.

Thanks again, everyone.

[lucy24]

I guess I was HOPING there would be a way to go like:

#three_fourths_text > h1, h2, h3 {color: #fbfbfb;}

No such luck. If you tried this (which I recommend you do, in a made-up sample document) you would find that the rule applies to:
(1) any h1 that is the child (not descendant) of the element with id "three_fourths_text"
(2) any h2 anywhere
(3) any h3 anywhere

or something like this:

#three_fourths_text h* {color: #fbfbfb;}

Boy, that would be nice wouldn't it :) But in CSS the wild card * only represents a complete word. If it helps, think of h1 h2 and so on as entirely different elements, just like <p> and <table> are entirely different elements. They just happen to have similar names.

---

Incidentally, I am not really wild about using "three_fourths_text" as a class name. Suppose you later on decide to use some different size? It ends up like saying

span.red {color: blue;}

Do as I say. Not as I do. I've a clutch of classnames "center", "middle" etc for use primarily with table cells.

---

Wait. Stop. Rewind.

{color: #fbfbfb;}

Say what now? That's barely off-white. (I like short forms, so I'd probably be using #EEE.) What color is the background? The CSS validator no longer yips about color declarations that don't mention both "color" and "background-color", but it's still a good idea to keep track of both.

[Planet13]

Wait. Stop. Rewind.
{color: #fbfbfb;}
Say what now? That's barely off-white.

Remind me never to try and pull a fast one on Lucy.

You are indeed right. Very much similar to white. We just wanted to take the edge off ever so slightly.