: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 |