Kann ich alle <H> -Tags mit einem einzigen Selektor ausrichten?

154

Ich möchte alle h-Tags auf einer Seite als Ziel festlegen. Ich weiß, dass du es so machen kannst ...

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

Aber gibt es eine effizientere Möglichkeit, dies mit erweiterten CSS-Selektoren zu tun? zB so etwas wie:

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

(aber offensichtlich funktioniert das nicht)

SparrwHawk
quelle
8
Dies wird bei der Auswahl immer mühsamerh1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, ...
Vortico

Antworten:

126

Nein, in diesem Fall möchten Sie eine durch Kommas getrennte Liste.

Dave Markle
quelle
13
Für diejenigen, die hier von Google landen und sich fragen, was eine durch Kommas getrennte Liste in CSS bedeutet, ist dies das erste Beispiel, das OP gegeben hat. Das heißt , h1, h2, h3 {}.
Bluesmonk
44

Es ist kein einfaches CSS, aber wenn Sie WENIGER ( http://lesscss.org ) verwenden, können Sie dies mithilfe der Rekursion tun:

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

Mit Sass ( http://sass-lang.com ) können Sie dies verwalten, aber keine Rekursion zulassen. Sie haben @forSyntax für diese Instanzen:

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

Wenn Sie keine dynamische Sprache verwenden, die mit CSS wie LESS oder Sass kompiliert werden kann, sollten Sie auf jeden Fall eine dieser Optionen ausprobieren. Sie können Ihre CSS-Entwicklung wirklich vereinfachen und dynamisieren.

Steve
quelle
12
Ich bin mir ziemlich sicher, dass manuelles Tippen als das Erstellen einer for-Schleife in CSS wie h1, h2, h3 ... weniger Zeit und Platz in Anspruch nimmt. Jetzt und später klarer zu verstehen.
Muhammad Umer
¯_ (ツ) _ / ¯ "can" != "should". Trotzdem bieten die Sass / LESS-Optionen eine Erweiterbarkeit, die Vanilla CSS nicht bietet. Denken Sie an so etwas font-size: (48px / @index).
Steve
Das ist in Ordnung, wenn es Ihren Bedürfnissen am besten entspricht. Wie bereits in einem früheren Kommentar erwähnt, können Sie dies auf einfache Weise tun, wenn Sie aus irgendeinem Grund den Index in WENIGER oder Sass bearbeiten müssen. Ihre Implementierung kann basierend auf der Headernummer dynamisch sein.
Steve
Für Menschen , die integrieren wollen nicht scss/sassin ihrem Projekt, sondern wollen erzeugen cssmit scss/sassihr dieses Online - Tool namens verwenden kann sassmeister
Sameer Khan
37

Wenn Sie SASS verwenden, können Sie auch dieses Mixin verwenden:

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

Verwenden Sie es so:

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

Bearbeiten: Meine persönliche Lieblingsmethode, indem ich optional einen Platzhalter-Selektor für jedes der Überschriftenelemente erweitere.

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

Dann kann ich auf alle Überschriften zielen, als würde ich auf eine einzelne Klasse abzielen, zum Beispiel:

.element > %headings {
    color: red;
}
Ben Fleming
quelle
Es ist ein sehr kleiner Schritt von SCSS zu SCSS + Compass: kompass-style.org/reference/compass/helpers/selectors - Überschriften ($ von, $ bis)
Imperativ
1
Wow, bin zwei Jahre später darauf gestoßen ... und der Schnitt sieht golden aus! Ich bin mir sicher, dass ich den Zweck der !optionalFlagge auf der Erweiterung verstehe ? Und kann anscheinend nichts auf Google finden ...
Bill
3

Auswahlinterpolation des Stifts

for n in 1..6
  h{n}
    font: 32px/42px trajan-pro-1,trajan-pro-2;
Laggingreflex
quelle
Das funktioniert nicht. Bitte testen Sie Ihren Code, bevor Sie eine Antwort veröffentlichen, da dies für jeden schädlich ist, der versuchen kann, ihn zu verwenden. Ich habe Ihre Antwort mit getestetem und funktionierendem Code bearbeitet.
Hybrid Web Dev
@Hybridwebdev Es scheint für mich zu funktionieren . Es ist auch, wie die Dokumente Iteration
Laggingreflex
3

Der jQuery-Selektor für alle h-Tags (h1, h2 usw.) lautet ": header". Wenn Sie beispielsweise mit jQuery alle h-Tags rot färben möchten, verwenden Sie:

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

Fabian Madurai
quelle
Kannst du nur alle Überschriften innerhalb eines bestimmten Divs ansprechen? zB $('.my_div :header').css("color","red")?
user1063287
1

Um dies mit Vanille-CSS anzugehen, suchen Sie nach Mustern in den Vorfahren der h1..h6Elemente:

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

Wenn Sie Muster erkennen können, können Sie möglicherweise einen Selektor schreiben, der auf das abzielt, was Sie möchten. In Anbetracht des obigen Beispiels können alle h1..h6Elemente durch Kombinieren der :first-childund der :notPseudoklassen aus CSS3, die in allen modernen Browsern verfügbar sind, wie folgt gezielt werden :

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

In Zukunft werden fortschrittliche Pseudoklassenselektoren wie :has()und nachfolgende Geschwisterkombinatoren ( ~) noch mehr Kontrolle bieten, da sich die Webstandards im Laufe der Zeit weiterentwickeln.

Josh Habdas
quelle
1

Sie können auch PostCSS und das Plugin für benutzerdefinierte Selektoren verwenden

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

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

Ausgabe:

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

Sie können alle Überschriften in Ihrem Dokument klassifizieren, wenn Sie sie mit einem einzigen Selektor wie folgt ausrichten möchten:

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

und in der CSS

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

Ich sage nicht, dass dies immer eine bewährte Methode ist, aber es kann nützlich sein und für die Ausrichtung der Syntax in vielerlei Hinsicht einfacher sein.

Wenn Sie also allen h1 bis h6 dieselbe HTML-Klasse im HTML zuweisen, können Sie sie für alle HTML-Dokumente ändern, die dieses CSS-Blatt verwenden.

Auf den Kopf gestellt, mehr globale Kontrolle im Vergleich zu "Abschnitt Div Artikel h1, etc {}",

Nachteil: Anstatt alle Selektoren im CSS aufzurufen, müssen Sie viel mehr HTML eingeben, aber ich finde, dass es von Vorteil sein kann, eine Klasse im HTML zu haben, die auf alle Überschriften abzielt. Achten Sie nur auf den Vorrang im HTML CSS, weil Konflikte entstehen können aus

DennisWPaulsenJR
quelle
0

Die neue :is()CSS-Pseudoklasse kann dies in einem Selektor tun:

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