`: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.

Die :lang() CSS-Pseudoklasse selektiert Elemente basierend auf der Sprache, die ihnen zugewiesen ist.

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 vom Protokoll (wie HTTP-Header) bestimmt. Für andere Dokumenttypen können andere Methoden zur Bestimmung der Sprache existieren.

Syntax

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

Parameter

<language-code>: Eine durch Kommas getrennte Liste von einem oder mehreren <string>s, die Elemente basierend auf den in ihren lang-Attributen gesetzten BCP 47-Sprachtags anvisiert. Die Übereinstimmung mit dem Sprachbereich ist nicht case-sensitiv.

Beschreibung

Bei der Auswahl von Sprachen gibt es ein 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 ein voller Match eines Sprachsubtags enthalten sein, sodass :lang("*-F*") ungültig, aber :lang("*-Fr") gültig ist.

Beispiele

Übereinstimmung von Kindern mit einer bestimmten Sprache

In diesem Beispiel wird die :lang()-Pseudoklasse verwendet, um die Eltern von Blockzitaten (<q>) mithilfe von Kind-Kombinatoren zu selektieren. Beachten Sie, dass dies nicht die einzige Methode für dieses Vorgehen darstellt und dass die beste Methode vom Dokumenttyp abhängt. Beachten Sie auch, dass Unicode-Werte verwendet werden, um einige der speziellen 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

Übereinstimmung mehrerer Sprachen

Das folgende Beispiel zeigt, wie man mehrere Sprachen durch Angabe einer durch Kommas getrennten Liste von Sprachcodes anvisiert. Es ist auch möglich, ein Wildcard zu verwenden, um Sprachen innerhalb eines bestimmten Sprachbereichs zu matchen.

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>