`:lang()`-CSS-Pseudoklasse

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die :lang()-CSS-Pseudoklasse wählt Elemente anhand der Sprache aus, die für sie ermittelt wurde.

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 anhand einer Kombination aus dem lang-Attribut, dem <meta>-Element und möglicherweise Informationen aus dem Protokoll (z. B. HTTP-Headern) bestimmt. Bei anderen Dokumenttypen kann es andere Methoden zur Bestimmung der Sprache geben.

Syntax

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

Parameter

<language-code>: Eine durch Kommas getrennte Liste aus einem oder mehreren <string>s, die Elemente anhand der in ihren lang-Attributen festgelegten BCP-47-Sprachtags auswählen. Beim Abgleich von Sprachbereichen wird die Groß- und Kleinschreibung nicht berücksichtigt.

Beschreibung

Bei der Auswahl von Sprachen werden Platzhalter implizit berücksichtigt. Daher stimmt :lang(de-DE) mit de-DE, de-DE-1996, de-Latn-DE, de-Latf-DE und de-Latn-DE-1996 überein. Bei der expliziten Verwendung von Platzhaltern muss ein Sprach-Subtag vollständig übereinstimmen. Deshalb ist :lang("*-F*") ungültig, :lang("*-Fr") dagegen gültig.

Beispiele

Kindelemente einer bestimmten Sprache auswählen

In diesem Beispiel wird die Pseudoklasse :lang() verwendet, um mithilfe von Kind-Kombinatoren die Elternelemente von Zitatelementen (<q>) auszuwählen. Dies ist nicht die einzige Möglichkeit. Welche Methode am besten geeignet ist, hängt vom Dokumenttyp ab. Beachten Sie außerdem, dass Unicode-Werte verwendet werden, um einige der besonderen Anführungszeichen anzugeben.

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

Mehrere Sprachen auswählen

Das folgende Beispiel zeigt, wie Sie mehrere Sprachen auswählen, indem Sie eine durch Kommas getrennte Liste von Sprachcodes angeben. Sie können auch einen Platzhalter verwenden, um Sprachen innerhalb eines bestimmten Sprachbereichs auszuwählen.

p {
  margin: 0;
}

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>

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;
}