: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
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
<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
: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
/* 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
<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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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
- Die
:dir
-Pseudoklasse, die nach der Textausrichtung auswählt - HTML-Attribut
lang
- HTML-Attribut
translate
- RFC 5646: Tags for Identifying Languages (also known as BCP 47)