web-dev-qa-db-fra.com

Puis-je cibler toutes les balises <H> avec un seul sélecteur?

Je voudrais cibler toutes les balises h sur 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 existe-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 ça ne marche pas)

csscss3css-selectors
119
SparrwHawk

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

94
Dave Markle

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 la syntaxe @for 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 compile en CSS, tel que LESS ou Sass, vous devez absolument choisir l'une de ces options. Ils peuvent vraiment simplifier et rendre plus dynamique votre développement CSS.

40
Steve

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

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

Utilisez-le comme suit:

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

Édition: 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 d’en-tête.

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

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

.element > %headings {
    color: red;
}
31
Ben Fleming

SCSS + Compass simplifie cette tâche, car nous parlons de pré-processeurs.

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

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

5
Imperative

Stylet 's interpolation du sélecteur

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

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

<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. Étant donné l'exemple ci-dessus, tous les éléments h1..h6 peuvent être ciblés en combinant les pseudo-classes :first-child et :not de CSS3, disponibles dans tous les navigateurs modernes, comme suit:

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

À l'avenir, des sélecteurs de pseudo-classes avancés tels que :has() et des combinateurs later-frère (~) fourniront encore plus de contrôle à mesure que les standards Web évoluent avec le temps.

1
Josh Habdas

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,

ainsi, si vous attribuez à tous les h1 à h6 la même classe .heading au format HTML, vous pouvez les modifier pour tous les documents html utilisant cette feuille css.

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

inconvénient, au lieu d’appeler tous les sélecteurs sur place dans le css, vous aurez beaucoup plus de frappe en html, mais je trouve qu’avoir une classe dans le html pour cibler tous les en-têtes peut être bénéfique, faites attention à la priorité dans le CSS, parce que des conflits peuvent résulter de 

1
DennisWPaulsenJR

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;
}

Sortie:

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