Typselektoren

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Der CSS-Typselektor erfasst Elemente anhand des Knotennamens. Mit anderen Worten, er wählt alle Elemente des angegebenen Typs innerhalb eines Dokuments aus.

css
/* All <a> elements. */
a {
  color: red;
}

Typselektoren können bei Verwendung von @namespace mit Namespaces versehen werden. Dies ist nützlich, wenn man mit Dokumenten arbeitet, die mehrere Namespaces enthalten, wie HTML mit eingebettetem SVG oder MathML oder XML, das mehrere Vokabulare mischt.

  • ns|h1 - erfasst <h1>-Elemente im Namespace ns
  • *|h1 - erfasst alle <h1>-Elemente
  • |h1 - erfasst alle <h1>-Elemente ohne deklarierten Namespace

Syntax

css
element { style properties }

Beispiele

CSS

css
span {
  background-color: skyblue;
}

HTML

html
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>

Ergebnis

Namespaces

In diesem Beispiel wird der Selektor nur <h1>-Elemente im Beispiel-Namespace erfassen.

css
@namespace example url(http://www.example.com/);
example|h1 {
  color: blue;
}

Spezifikationen

Specification
Selectors Level 4
# type-selectors

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch