Me gustaría apuntar a todas las etiquetas h en una página. Sé que puedes hacerlo de esta manera ...

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

¿Pero hay una manera más eficiente de hacer esto usando selectores avanzados de CSS? por ejemplo, algo como:

[att^=h] {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

(pero obviamente esto no funciona)

No, una lista separada por comas es lo que quiere en este caso.

No es CSS básico, pero si está utilizando MENOS ( http://lesscss.org ), puede hacerlo utilizando la recursividad:

.hClass (@index) when (@index > 0) {
    h@{index} {
        font: 32px/42px trajan-pro-1,trajan-pro-2;
    }
    .hClass(@index - 1);
}
.hClass(6);

Sass ( http://sass-lang.com ) le permitirá administrar esto, pero no permitirá la recursividad; tienen @forsintaxis para estos casos:

@for $index from 1 through 6 {
  h#{$index}{
    font: 32px/42px trajan-pro-1,trajan-pro-2;
  }
}

Si no está utilizando un lenguaje dinámico que se compila a CSS como LESS o Sass, definitivamente debe consultar una de estas opciones. Realmente pueden simplificar y hacer más dinámico su desarrollo CSS.

Si usa SASS, también podría usar este mixin:

@mixin headings {
    h1, h2, h3,
    h4, h5, h6 {
        @content;
    }
}

Úselo así:

@include headings {
    font: 32px/42px trajan-pro-1, trajan-pro-2;
}

Editar: mi forma favorita de hacer esto al ampliar opcionalmente un selector de marcador de posición en cada uno de los elementos de encabezado.

h1, h2, h3,
h4, h5, h6 {
    @extend %headings !optional;
}

Entonces puedo apuntar a todos los encabezados como apuntaría a cualquier clase individual, por ejemplo:

.element > %headings {
    color: red;
}

SCSS + Compass lo hace muy fácil, ya que estamos hablando de preprocesadores.

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

Puede obtener información sobre todos los selectores de ayuda de Compass aquí :

Stylus 's interpolación selector

for n in 1..6
  h{n}
    font: 32px/42px trajan-pro-1,trajan-pro-2;

El selector jQuery para todas las etiquetas h (h1, h2, etc.) es ": encabezado". Por ejemplo, si desea que todas las etiquetas h sean de color rojo con jQuery, use:

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

Para abordar esto con CSS vainilla, busque patrones en los antepasados ​​de los h1..h6elementos:

<section class="row">
  <header>
    <h1>AMD RX Series</h1>
    <small>These come in different brands and types</small>
  </header>
</header>

<div class="row">
  <h3>Sapphire RX460 OC 2/4GB</h3>
  <small>Available in 2GB and 4GB models</small>
</div>

Si puede detectar patrones, puede escribir un selector que apunte a lo que desea. Teniendo en cuenta el ejemplo anterior todos los h1..h6elementos pueden ser el blanco de la combinación de la :first-childy :notpseudo-clases de CSS3, disponible en todos los navegadores modernos, así:

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

En el futuro, los selectores avanzados de pseudo-clase como :has(), y los combinadores de hermanos posteriores ( ~), proporcionarán aún más control a medida que los estándares web continúen evolucionando con el tiempo.

También puede usar PostCSS y el complemento de selectores personalizados

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

article :--headings {
  margin-top: 0;
}

Salida:

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  margin-top: 0;
}

Puede clasificar todos los encabezados en su documento si desea orientarlos con un solo selector, de la siguiente manera,

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

y en el css

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

No digo que esto sea siempre una práctica recomendada, pero puede ser útil y, para orientar la sintaxis, es más fácil de muchas maneras,

así que si le das a todos h1 a h6 la misma clase .heading en el html, entonces puedes modificarlos para cualquier documento html que utilice esa hoja css.

al revés, más control global versus "sección div artículo h1, etc. {}",

inconveniente, en lugar de llamar a todos los selectores en el lugar en el CSS, tendrá que escribir mucho más en el html, pero encuentro que tener una clase en el html para apuntar a todos los encabezados puede ser beneficioso, solo tenga cuidado con la precedencia en el css, porque los conflictos pueden surgir de

La nueva :is()pseudo-clase CSS puede hacerlo en un selector:

:is(h1, h2, h3, h4, h5, h6) {
  color: red;
}