: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 Pseudoklassenfunktion repräsentiert alle Überschriftselemente, deren Ebenen einer kommagetrennten Liste von Ganzzahlen entsprechen. Dies ermöglicht es, Elemente auf bestimmten Überschriftsebenen gleichzeitig zu stylen, anstatt sie einzeln abzugleichen und zu stylen.
Hinweis:
Die :heading() Funktional-Pseudoklasse hat die gleiche Spezifität wie ein Klassenselektor, also 0-1-0. Zum Beispiel hat section:heading() eine Spezifität von 0-1-1.
Syntax
:heading( <integer># ) {
/* ... */
}
Parameter
Die :heading() Pseudoklassenfunktion nimmt eine kommagetrennte Liste von <integer>s, die die zu stylenden Überschriftsebenen darstellen.
Anwendungshinweise
Die :heading() Funktional-Pseudoklasse passt nur zu Elementen, die semantisch als Überschriften erkannt werden. Sie passt nicht zu Elementen, die role="heading" oder 'aria-level' Attribute verwenden.
Die von :heading() verwendete Überschriftenebene kann von dem Typselektor eines Elements abweichen, wenn der Browser eine andere sichtbare Überschriftenebene berechnet. Zum Beispiel wird h1:heading(3) jedes <h1> Element markieren, das als Überschrift der Ebene 3 dargestellt wird.
Beispiele
Auswählen spezifischer Überschriftsebenen
In diesem Beispiel wird eine kommagetrennte Liste von Werten verwendet, um Überschriften auf ungeraden Ebenen (<h1> und <h3>) und geraden Ebenen (<h2> und <h4>) gezielt 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 |