: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 Pseudoklasse Funktion repräsentiert alle Überschriftselemente, deren Ebenen mit einer durch Kommas getrennten Liste von ganzen Zahlen übereinstimmen. Dies ermöglicht es, Elemente auf bestimmten Überschriftsebenen gleichzeitig zu stylen, anstatt sie einzeln zu matchen und zu stylen.
Hinweis:
Die :heading() funktionale Pseudoklasse hat die gleiche Spezifität wie ein Klassenselektor, das heißt, 0-1-0. Zum Beispiel hat section:heading() eine Spezifität von 0-1-1.
Syntax
:heading( <integer># ) {
/* ... */
}
Parameter
Die :heading() Pseudoklassen-Funktion nimmt eine durch Kommas getrennte Liste von <integer>s, die die zu stylenden Überschriftsebenen darstellen.
Anwendungshinweise
Die :heading() funktionale Pseudoklasse matched nur Elemente, die semantisch als Überschriften anerkannt sind. Sie matched keine Elemente, die die Attribute role="heading" oder 'aria-level' verwenden.
Die von :heading() verwendete Überschriftsebene kann sich von einem Typselektor eines Elements unterscheiden, in Fällen, in denen der Browser eine andere exponierte Überschriftsebene berechnet. Zum Beispiel wird h1:heading(3) jedes <h1> Element matchen, das als Überschrift der Ebene 3 exponiert ist.
Beispiele
Auswahl spezifischer Überschriftsebenen
In diesem Beispiel wird eine durch Kommas getrennte Liste von Werten verwendet, um Überschriften mit ungeraden Nummern (<h1> und <h3>) und geraden Nummern (<h2> und <h4>) zu targetieren.
<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 |
Browser-Kompatibilität
Loading…