Je souhaite cibler toutes les balises h d'une page. Je sais que tu peux le faire de cette façon ...

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

mais y a-t-il un moyen plus efficace de le faire en utilisant des sélecteurs CSS avancés? par exemple quelque chose comme:

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

(mais évidemment cela ne fonctionne pas)

Non, une liste séparée par des virgules est ce que vous voulez dans ce cas.

Ce n'est pas un css basique, mais si vous utilisez LESS ( http://lesscss.org ), vous pouvez le faire en utilisant la récursivité:

.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 ) vous permettra de gérer cela, mais n'autorisera pas la récursivité; ils ont une @forsyntaxe pour ces instances:

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

Si vous n'utilisez pas un langage dynamique qui se compile en CSS comme LESS ou Sass, vous devriez certainement vérifier l'une de ces options. Ils peuvent vraiment simplifier et dynamiser votre développement CSS.

Si vous utilisez SASS, vous pouvez également utiliser ce mixin:

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

Utilisez-le comme ceci:

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

Modifier: Ma façon préférée de le faire en étendant éventuellement un sélecteur d'espace réservé sur chacun des éléments de titre.

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

Ensuite, je peux cibler tous les en-têtes comme je ciblerais n'importe quelle classe unique, par exemple:

.element > %headings {
    color: red;
}

SCSS + Compass en fait un jeu d'enfant, puisque nous parlons de pré-processeurs.

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

Vous pouvez en savoir plus sur tous les sélecteurs d'aide Compass ici :

Stylus l » interpolation de sélection

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

Le sélecteur jQuery pour toutes les balises h (h1, h2, etc.) est ": header". Par exemple, si vous souhaitez rendre toutes les balises h de couleur rouge avec jQuery, utilisez:

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

Pour résoudre ce problème avec du CSS vanille, recherchez des modèles dans les ancêtres des h1..h6éléments:

<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 vous pouvez repérer des motifs, vous pourrez peut-être écrire un sélecteur qui cible ce que vous voulez. Compte tenu de l'exemple ci-dessus, tous les h1..h6éléments peuvent être ciblés en combinant les :first-childet les :notpseudo-classes de CSS3, disponibles dans tous les navigateurs modernes, comme ceci:

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

Dans le futur, les sélecteurs de pseudo-classes avancés comme :has(), et les combinateurs ultérieurs ( ~), offriront encore plus de contrôle à mesure que les normes Web continueront d'évoluer au fil du temps.

Vous pouvez également utiliser PostCSS et le plugin de sélecteurs personnalisés

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

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

Production:

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

Vous pouvez .classer tous les titres de votre document si vous souhaitez les cibler avec un seul sélecteur, comme suit,

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

et dans le css

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

Je ne dis pas que c'est toujours la meilleure pratique, mais cela peut être utile, et pour cibler la syntaxe, plus facile à bien des égards,

donc si vous donnez à tous les h1 à h6 la même classe .heading dans le html, vous pouvez les modifier pour tous les documents html qui utilisent cette feuille css.

à la hausse, contrôle plus global par rapport à "section div article h1, etc {}",

inconvénient, au lieu d'appeler tous les sélecteurs en place dans le css, vous aurez beaucoup plus de saisie dans le html, mais je trouve qu'avoir une classe dans le html pour cibler tous les en-têtes peut être bénéfique, faites juste attention à la priorité dans le css, car des conflits peuvent survenir

La nouvelle :is()pseudo-classe CSS peut le faire dans un seul sélecteur:

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