:lang()

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.

* Some parts of this feature may have varying levels of support.

Die :lang() CSS Pseudoklasse wählt Elemente basierend auf ihrer bestimmten Sprache aus.

Probieren Sie es aus

Hinweis: In HTML wird die Sprache durch eine Kombination aus dem lang-Attribut, dem <meta>-Element und möglicherweise durch Informationen aus dem Protokoll (wie HTTP-Header) bestimmt. Für andere Dokumenttypen können andere Methoden zur Bestimmung der Sprache genutzt werden.

Syntax

Formale Syntax

:lang(<language-code> [,<language-code> ]*)
  /* ... */
}

Parameter

<language-code>

Eine durch Komma getrennte Liste von einem oder mehreren <string>, die ein Element mit einem Sprachwert gemäß BCP 47-Sprachcodes ansprechen. Die Übereinstimmung nach Sprachbereich erfolgt ohne Berücksichtigung der Groß- und Kleinschreibung.

Beschreibung

Beim Auswählen von Sprachen gibt es ein implizites Wildcard-Matching. So wird :lang(de-DE) mit de-DE, de-DE-1996, de-Latn-DE, de-Latf-DE und de-Latn-DE-1996 übereinstimmen. Das explizite Verwenden von Wildcards erfordert eine vollständige Übereinstimmung eines Sprachsubtags. Daher ist :lang("*-F*") ungültig, aber :lang("*-Fr") ist gültig.

Beispiele

Übereinstimmen von untergeordneten Elementen einer bestimmten Sprache

In diesem Beispiel wird die :lang()-Pseudoklasse verwendet, um die Eltern von Zitat-Elementen (<q>) mit Kindkombinatoren auszuwählen. Beachten Sie, dass dies nicht die einzige Möglichkeit ist, dies zu tun, und dass die beste Methode von der Art des Dokuments abhängt. Beachten Sie außerdem, dass Unicode-Werte verwendet werden, um einige der speziellen Anführungszeichen zu spezifizieren.

HTML

html
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
  <q>This German quote has a <q>nested</q> quote inside.</q>
</div>

CSS

css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039" "\203A";
}

Ergebnis

Übereinstimmen mehrerer Sprachen

Das folgende Beispiel zeigt, wie mehrere Sprachen durch eine durch Komma getrennte Liste von Sprachcodes angesprochen werden können. Es ist auch möglich, Wildcards zu nutzen, um Sprachen in einem bestimmten Sprachbereich abzugleichen.

CSS

css
/* Matches nl and de */
:lang("nl", "de") {
  color: green;
}

/* Omitting quotes & case-insensitive matching */
:lang(EN, FR) {
  color: blue;
}

/* Wildcard matching a language range */
:lang("*-Latn") {
  color: red;
}

HTML

html
<p lang="nl">Dit is een Nederlandse paragraaf.</p>
<p lang="de">Dies ist ein deutscher Satz.</p>
<p lang="en">This is an English sentence.</p>
<p lang="en-GB">Matching the language range of English.</p>
<p lang="fr">Ceci est un paragraphe français.</p>
<p lang="fr-Latn-FR">Ceci est un paragraphe français en latin.</p>

Ergebnis

Spezifikationen

Specification
Selectors Level 4
# lang-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:lang()
Comma-separated list of language codes as :lang(A, B)
Matching language codes with wildcards as :lang(*-Latn)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch