Can I target all tags with a single selector?

Question

I\'d like to target all h tags on a page. I know you can do it this way...

h1,
h2,
h3,
h4,
h5,
h6 {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}


        

Answer 1

No, a comma-separated list is what you want in this case.

Answer 2

You could .class all the headings in Your document if You would like to target them with a single selector, as follows,

<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>

and in the css

.heading{
    color: #Dad;
    background-color: #DadDad;
}

I am not saying this is always best practice, but it can be useful, and for targeting syntax, easier in many ways,

so if You give all h1 through h6 the same .heading class in the html, then You can modify them for any html docs that utilize that css sheet.

upside, more global control versus "section div article h1, etc{}",

downside, instead of calling all the selectors in on place in the css, You will have much more typing in the html, yet I find that having a class in the html to target all headings can be beneficial, just be careful of precedence in the css, because conflicts could arise from

Answer 3

The jQuery selector for all h tags (h1, h2 etc) is " :header ". For example, if you wanted to make all h tags red in color with jQuery, use:

$(':header').css("color","red")

Answer 4

SCSS+Compass makes this a snap, since we're talking about pre-processors.

#{headings(1,5)} {
    //definitions
  }

You can learn about all the Compass helper selectors here: