:lang()

Baseline Widely available *

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

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

Die :lang() CSS Pseudoklasse trifft auf Elemente zu, basierend auf der Sprache, in der sie bestimmt werden.

Probieren Sie es aus

*:lang(en-US) {
  outline: 2px solid deeppink;
}

<p lang="en-US">
  Music during road trips and long commutes aren’t a problem, but using
  headphones isn’t the best thing to do while driving in your car.
</p>

<p lang="pl-PL">
  Gdy widzimy znak z narysowaną czaszką i napisem
  <strong lang="en-US">DANGER</strong> to lepiej nie wchodzić do środka.
</p>

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 etwa HTTP-Header) bestimmt. Für andere Dokumenttypen können andere Methoden zur Sprachbestimmung existieren.

Syntax

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

Parameter

<language-code>: Eine kommagetrennte Liste von einem oder mehreren <string>, die ein Element mit einem Sprachwert gemäß der BCP 47-Sprachcodes anvisieren. Das Matching nach Sprachbereich ist nicht groß-/kleinschreibungssensitiv.

Beschreibung

Beim Auswählen von Sprachen gibt es implizites Wildcard-Matching, sodass :lang(de-DE) mit de-DE, de-DE-1996, de-Latn-DE, de-Latf-DE und de-Latn-DE-1996 übereinstimmt. Beim expliziten Einsatz von Wildcards muss eine vollständige Übereinstimmung eines Sprach-Subtags erfolgen, also ist :lang("*-F*") ungültig, aber :lang("*-Fr") ist gültig.

Beispiele

Übereinstimmung von Kindern einer bestimmten Sprache

In diesem Beispiel wird die :lang() Pseudoklasse genutzt, um die Eltern von Zitatelementen (<q>) mit Hilfe von Kind-Kombinatoren zu treffen. Beachten Sie, dass dies nicht die einzige Möglichkeit darstellt, und dass die beste Methode von der Art des Dokuments abhängt. Beachten Sie auch, 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

Übereinstimmung mehrerer Sprachen

Das folgende Beispiel zeigt, wie mehrere Sprachen durch Angabe einer kommagetrennten Liste von Sprachcodes übereinstimmen. Es ist auch möglich, ein Wildcard zu verwenden, um Sprachen in einem bestimmten Sprachbereich zu treffen.

p {
  margin: 0;
}

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

Siehe auch

Die :dir Pseudoklasse, die nach Textausrichtung abgleicht
HTML lang Attribut
HTML translate Attribut
RFC 5646: Tags for Identifying Languages (also known as BCP 47)

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden