: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()-Pseudo-Klasse-Funktion im CSS repräsentiert alle Überschriftselemente, deren Ebenen einer durch Kommas getrennten Liste von ganzen Zahlen entsprechen. Dies ermöglicht es, Elemente bestimmter Überschriftsebenen auf einmal zu stylen, anstatt sie einzeln abzugleichen und zu stylen.
Hinweis:
Die funktionale Pseudo-Klasse :heading() hat dieselbe Spezifität wie ein Klassenselektor, nämlich 0-1-0. Zum Beispiel hat section:heading() eine Spezifität von 0-1-1.
Syntax
:heading( <integer># ) {
/* ... */
}
Parameter
Die :heading()-Pseudo-Klassen-Funktion nimmt eine durch Kommas getrennte Liste von <integer>-Werten, die die zu stylenden Überschriftsebenen darstellen.
Verwendungshinweise
Die funktionale Pseudo-Klasse :heading() gleicht nur Elemente ab, die semantisch als Überschriften erkannt werden. Sie gleicht keine Elemente ab, die role="heading" oder 'aria-level' Attribute verwenden.
Die von :heading() verwendete Überschriftsebene kann sich von dem eines Elements Typselektor unterscheiden, in Fällen, in denen der Browser eine andere, exponierte Überschriftsebene berechnet. Zum Beispiel wird h1:heading(3) jedes <h1>-Element abgleichen, das als Überschrift der Ebene 3 exponiert wird.
Beispiele
Auswahl spezifischer Überschriftsebenen
In diesem Beispiel wird eine durch Kommas getrennte Liste von Werten verwendet, um Überschriften auf ungeraden Ebenen (<h1> und <h3>) und geraden Ebenen (<h2> und <h4>) anzusprechen.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
:heading(1, 3) {
color: tomato;
}
:heading(2, 4) {
color: slateblue;
}
Spezifikationen
| Specification |
|---|
| Selectors Level 5 # headings |