:lang()

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> 

Syntax

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

Parameter

<language-code>

Eine kommagetrennte Liste von einem oder mehreren <string>s, die Elemente basierend auf den in ihren lang-Attributen gesetzten BCP 47-Sprachtags anvisieren. Das Matching von Sprachbereichen ist nicht sensitiv gegenüber Groß- und Kleinschreibung.

Beschreibung

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

Beispiele

Übereinstimmung von Kindern einer gegebenen Sprache

In diesem Beispiel wird die :lang() Pseudoklasse verwendet, um die Eltern von Zitat-Elementen (<q>) mit Kindkombinatoren zu markieren. Beachten Sie, dass dies nicht die einzige Möglichkeit ist und dass die beste Methode je nach Dokumenttyp variiert. Beachten Sie auch, 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

Übereinstimmung mehrerer Sprachen

Das folgende Beispiel zeigt, wie man durch Bereitstellung einer kommagetrennten Liste von Sprachcodes mehrere Sprachen auswählen kann. Es ist auch möglich, ein Wildcard zu verwenden, um Sprachen in einem gegebenen Sprachbereich auszuwählen.

p { margin: 0; } 

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

Browser-Kompatibilität

Siehe auch

• Die :dir Pseudoklasse, die nach Textausrichtung auswählt
• HTML lang Attribut
• HTML translate Attribut
• BCP 47-Sprachtag