: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 wählt alle Überschriftselemente in einem Dokument aus.
Syntax
:heading {
/* ... */
}
Beschreibung
Die :heading Pseudoklasse ermöglicht es Ihnen, alle Überschriften auf einmal zu stylen, anstatt sie einzeln zu selektieren und zu stylen.
Diese Pseudoklasse wählt nur Elemente aus, die standardmäßig semantisch als Überschriften erkannt werden (<h1> bis <h6>). Elemente mit role="heading" werden nicht ausgewählt; Sie können diese mit dem [role="heading"] Attributselektor auswählen.
Die :heading Pseudoklasse hat die gleiche Spezifität wie ein Klassenselektor, also 0-1-0. Somit hat :heading eine Spezifität von 0-1-0, während h1, h2, h3, h4, h5, h6 eine Spezifität von 0-0-1 aufweisen und section:heading eine Spezifität von 0-1-1 hätte.
Beispiele
Alle Überschriften stylen
In diesem Beispiel verwenden wir die :heading Pseudoklasse, um mehrere Ebenen von Überschriften zu stylen.
HTML
Das Dokument enthält Überschriften auf drei verschiedenen Ebenen sowie <p> Absatzelemente.
<h1>Mastering CSS</h1>
<h2>Chapter 1: Selectors</h2>
<p>
A CSS selector is the part of a CSS rule that describes what elements in a
document the rule will match.
</p>
<h3>1.1 Pseudo-classes</h3>
<p>
CSS pseudo-classes enable selecting elements based on information that lies
outside of the document tree.
</p>
CSS
Wir setzen die Überschriftselemente kursiv und tomatenrot.
:heading {
color: tomato;
font-style: italic;
}
Ergebnisse
Die :heading Pseudoklasse wendet die color und font-style auf alle Überschriften im Dokument an, jedoch nicht auf die Absätze:
Spezifikationen
| Specification |
|---|
| Selectors Level 5 # headings |