:heading()

Die :heading() CSS Pseudoklassen-Funktion repräsentiert alle Überschriftselemente, die einem Wert entsprechen, der unter Verwendung der An+B-Notation berechnet wird. Dies ermöglicht es Ihnen, Elemente auf spezifischen Überschriftenebenen gleichzeitig zu stylen, anstatt sie individuell abzugleichen und zu stylen.

Hinweis: Die funktionale Pseudoklasse :heading() hat die gleiche Spezifität wie ein Klassenselektor, das heißt, 0-1-0. :heading() hätte also eine Spezifität von 0-1-0, und section:heading() hätte eine Spezifität von 0-1-1.

Syntax

css

:heading([ <An+B> [, <An+B>]* | even | odd ]) {
  /* ... */
}

Parameter

Die :heading()-Pseudoklassen-Funktion nimmt eine komma-separierte Liste von An+B-Ausdrücken oder Schlüsselwortwerten, die ein Muster zur Übereinstimmung mit Überschriftselementen beschreiben.

Schlüsselwortwerte

odd: Repräsentiert die Überschriftselemente, deren numerische Position ungerade ist: <h1>, <h3>, und <h5>.
even: Repräsentiert die Überschriftselemente, deren numerische Position gerade ist: <h2>, <h4>, und <h6>.

Funktionale Notation

<An+B>

Repräsentiert die Überschriftselemente, deren numerische Position dem Muster An+B entspricht, für jeden positiven Integer oder Nullwert von n, wobei:

A eine ganzzahlige Schrittgröße ist,
B ein ganzzahliger Offset ist,
n alle nicht-negativen Integer sind, beginnend bei 0.

Es kann als das An+B-te Element einer Liste gelesen werden. A und B müssen beide <integer> Werte haben.

Anwendungshinweise

Die funktionale Pseudoklasse :heading() stimmt nur mit Elementen überein, die semantisch als Überschriften erkannt werden. Sie stimmt nicht mit Elementen mit einem role="heading"-Attribut überein, noch respektiert sie das 'aria-level' ARIA-Attribut.

Beispiele

Verwendung von Schlüsselwortparametern

In diesem Beispiel stimmt das Schlüsselwort odd mit Überschriften mit ungeraden Nummern überein, welche <h1> und <h3> sind. Das Schlüsselwort even wird verwendet, um Überschriften mit geraden Nummern zu selektieren, <h2> und <h4>.

html

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

css

:heading(odd) {
  color: tomato;
}
:heading(even) {
  color: slateblue;
}

Verwendung der `An+B`-Notation

html

<h1>Science</h1>
<h2>Physics</h2>
<h3>Atomic, molecular, and optical physics</h3>
<h4>Optical physics</h4>
<h5>X-Rays</h5>
<h6>Discovery</h6>

main {
  display: flex;
  justify-content: space-around;
}

css

/* Targets headings <h3> and <h4> */
:heading(3, 4) {
  font-weight: 100;
}
/* Targets headings in reverse starting from <h3> */
:heading(-n + 3) {
  color: tomato;
}
/* Targets every third heading starting from <h1> */
:heading(3n + 1) {
  font-style: italic;
}
/* Targets headings after level 5 */
:heading(n + 5) {
  color: slateblue;
}

In diesem Beispiel:

:heading(3, 4) stimmt mit den <h3> und <h4> Elementen überein
:heading(-n + 3) stimmt mit Überschriftselementen in umgekehrter Reihenfolge überein, also <h3>, <h2>, und <h1>
:heading(3n + 1) stimmt mit jedem dritten (3n) Überschriftselement beginnend mit <h1> überein, also würde dies <h1> und <h4> einschließen
:heading(n + 5) stimmt mit Überschriftselementen beginnend mit <h5> überein und wird <h6> einschließen

Spezifikationen

Specification
Selectors Level 5 # headings

Browser-Kompatibilität

Siehe auch

:heading

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden