:heading() CSS-Pseudoklasse
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
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 kommagetrennten Liste von Ganzzahlen übereinstimmen. Dies ermöglicht es Ihnen, Elemente auf bestimmten Überschriftenebenen gleichzeitig zu stylen, anstatt sie einzeln anzusprechen 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() Pseudoklasse Funktion nimmt eine kommagetrennte Liste von <integer>s, die die zu stylenden Überschriftenebenen repräsentieren.
Verwendungshinweise
Die :heading() funktionale 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 sich von dem Typselektor eines Elements unterscheiden, in Fällen, in denen der Browser eine andere sichtbare Überschriftenebene berechnet. Zum Beispiel wird h1:heading(3) jedes <h1>-Element ansprechen, das als Überschrift der Ebene 3 dargestellt wird.
Beispiele
Auswahl bestimmter Überschriftenebenen
In diesem Beispiel wird eine kommagetrennte 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
| Spezifikation |
|---|
| Selectors Level 5 # headings |