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

To tackle this with vanilla CSS look for patterns in the ancestors of the h1..h6 elements:

  

    
AMD RX Series
    These come in different brands and types
  



  
Sapphire RX460 OC 2/4GB
  Available in 2GB and 4GB models

If you can spot patterns you may be able to write a selector which targets what you want. Given the above example all h1..h6 elements may be targeted by combining the :first-child and :not pseudo-classes from CSS3, available in all modern browsers, like so:

.row :first-child:not(header) { /* ... */ }

In the future advanced pseudo-class selectors like :has(), and subsequent-sibling combinators (~), will provide even more control as Web standards continue to evolve over time.