Gostaria de segmentar todas as tags h em uma página. Eu sei que você pode fazer assim ...

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

mas existe uma maneira mais eficiente de fazer isso usando seletores CSS avançados? por exemplo, algo como:

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

(mas obviamente isso não funciona)

Não, uma lista separada por vírgula é o que você deseja neste caso.

Não é um CSS básico, mas se você estiver usando LESS ( http://lesscss.org ), poderá fazer isso usando a recursão:

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

O Sass ( http://sass-lang.com ) permitirá que você gerencie isso, mas não permitirá recursão; eles têm @forsintaxe para essas instâncias:

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

Se você não estiver usando uma linguagem dinâmica que seja compilada para CSS como LESS ou Sass, verifique definitivamente uma dessas opções. Eles podem realmente simplificar e tornar mais dinâmico seu desenvolvimento de CSS.

Se você estiver usando o SASS, também poderá usar este mixin:

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

Use-o assim:

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

Editar: minha maneira favorita pessoal de fazer isso, estendendo opcionalmente um seletor de espaço reservado em cada um dos elementos de cabeçalho.

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

Então, eu posso segmentar todos os títulos como se fosse uma classe única, por exemplo:

.element > %headings {
    color: red;
}

O SCSS + Compass torna isso fácil, já que estamos falando de pré-processadores.

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

Você pode aprender sobre todos os seletores auxiliares da Bússola aqui :

Stylus 's interpolação selector

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

O seletor jQuery para todas as tags h (h1, h2 etc) é ": header". Por exemplo, se você quiser deixar todas as tags h de cor vermelha com o jQuery, use:

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

Para resolver isso com CSS baunilha, procure padrões nos ancestrais dos 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>

Se você conseguir identificar padrões, poderá escrever um seletor direcionado para o que deseja. Dado o exemplo acima todos os h1..h6elementos podem ser alvo de combinar o :first-childe :notpseudo-classes de CSS3, disponível em todos os navegadores modernos, assim:

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

No futuro, seletores avançados de pseudo-classe como :has()e combinadores de irmãos subsequentes ( ~) fornecerão ainda mais controle à medida que os padrões da Web continuarem evoluindo ao longo do tempo.

Você também pode usar o PostCSS e o plug-in de seletores personalizados

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

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

Resultado:

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

Você pode classificar todos os títulos em Seu documento se desejar direcioná-los com um único seletor, da seguinte maneira:

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

e no css

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

Não estou dizendo que essa é sempre uma prática recomendada, mas pode ser útil e, para direcionar a sintaxe, é mais fácil de várias maneiras,

portanto, se você der a todos os h1 a h6 a mesma classe .heading no html, poderá modificá-los para qualquer documento html que utilize essa folha de css.

upside, controle mais global versus "seção div artigo h1, etc {}",

desvantagem, em vez de chamar todos os seletores no lugar no css, você terá muito mais digitação no html, mas acho que ter uma classe no html para segmentar todos os títulos pode ser benéfico, apenas tenha cuidado com a precedência no css, porque conflitos podem surgir de

A nova :is()pseudo-classe CSS pode fazer isso em um seletor:

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