Vorrei scegliere come target tutti i tag h su una pagina. So che puoi farlo in questo modo ...

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

ma esiste un modo più efficiente per farlo utilizzando selettori CSS avanzati? ad esempio qualcosa del tipo:

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

(ma ovviamente questo non funziona)

No, un elenco separato da virgole è quello che vuoi in questo caso.

Non è css di base, ma se stai usando LESS ( http://lesscss.org ), puoi farlo usando la ricorsione:

.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 ) ti consentirà di gestirlo, ma non consentirà la ricorsione; hanno @forsintassi per questi casi:

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

Se non stai usando un linguaggio dinamico che compila in CSS come LESS o Sass, dovresti assolutamente provare una di queste opzioni. Possono davvero semplificare e rendere più dinamico il tuo sviluppo CSS.

Se stai usando SASS puoi anche usare questo mixin:

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

Usalo così:

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

Modifica: il mio modo preferito personale per farlo estendendo facoltativamente un selettore di segnaposto su ciascuno degli elementi di intestazione.

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

Quindi posso scegliere come target tutte le intestazioni come se dovessi scegliere una singola classe, ad esempio:

.element > %headings {
    color: red;
}

SCSS + Compass rende tutto questo un gioco da ragazzi, dal momento che stiamo parlando di pre-processori.

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

Puoi conoscere tutti i selettori di supporto Compass qui :

Stilo s' selettore interpolazione

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

Il selettore jQuery per tutti i tag h (h1, h2 ecc.) È ": header". Ad esempio, se si desidera rendere tutti i tag h di colore rosso con jQuery, utilizzare:

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

Per affrontare questo con CSS CSS vaniglia cercare modelli negli antenati degli h1..h6elementi:

<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 riesci a individuare i motivi, potresti essere in grado di scrivere un selettore che ha come target ciò che desideri. Dato l'esempio sopra riportato, tutti gli h1..h6elementi possono essere scelti come target combinando le :first-childe :notpseudo-classi da CSS3, disponibili in tutti i browser moderni, in questo modo:

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

In futuro, i selettori di pseudo-classe avanzati :has()e i combinatori di pari livello ( ~) forniranno un controllo ancora maggiore man mano che gli standard Web continueranno ad evolversi nel tempo.

Puoi anche utilizzare PostCSS e il plug-in selettori personalizzati

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

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

Produzione:

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

Puoi .classare tutte le intestazioni nel tuo documento se desideri sceglierle come target con un singolo selettore, come segue,

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

e nel css

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

Non sto dicendo che questa è sempre la migliore pratica, ma può essere utile e per indirizzare la sintassi, più facile in molti modi,

quindi se dai a h1 attraverso h6 la stessa classe .heading in html, puoi modificarli per qualsiasi documento html che utilizza quel foglio CSS.

al rialzo, maggiore controllo globale rispetto a "sezione div articolo h1, ecc {}",

aspetto negativo, invece di chiamare tutti i selettori presenti sul posto nel CSS, avrai molto più da digitare nell'html, ma trovo che avere una classe nell'html per indirizzare tutte le intestazioni possa essere utile, fai solo attenzione alla precedenza nel css, perché potrebbero sorgere conflitti

La nuova :is()pseudo-classe CSS può farlo in un solo selettore:

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