:heading()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die :heading() CSS Pseudoklassen- Funktion repräsentiert alle Heading-Elemente, die einen durch die An+B-Notation berechneten Wert erfüllen. Dies ermöglicht es Ihnen, Elemente auf spezifischen Überschriftsebenen auf einmal zu stylen, anstatt sie einzeln zuzuweisen und zu gestalten.

Hinweis: Die :heading() funktionale Pseudo-Klasse hat dieselbe Spezifität wie ein Klassenselektor, das heißt, 0-1-0. So hätte :heading() 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 durch Kommata getrennte Liste von An+B-Ausdrücken oder Schlüsselwortwerten, die ein Muster für das Matching von Heading-Elementen beschreiben.

Schlüsselwortwerte

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

Funktionale Notation

<An+B>

Repräsentiert die Heading-Elemente, deren numerische Position das Muster An+B erfüllt, für jeden positiven ganzzahligen oder Nullwert von n, wobei:

A ist eine ganze Zahl als Schrittgröße,
B ist eine ganze Zahl als Offset,
n sind alle nicht-negativen ganzen Zahlen, beginnend bei 0.

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

<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) matched die <h3> und <h4> Elemente
:heading(-n + 3) matched Überschriftselemente rückwärts, also <h3>, <h2>, und <h1>
:heading(3n + 1) matched jedes dritte (3n) Überschriftselement beginnend mit <h1>, also würden <h1> und <h4> eingeschlossen sein
:heading(n + 5) matched Überschriftselemente beginnend mit <h5> und wird <h6> einschließen