Übersicht:
Der pseudo-Klassen Selektor :lang(language-code) wählt Elemente anhand ihrer jeweiligen Sprache aus.
In HTML wird die Sprache über das lang Attribut, über ein <meta> Element festgelegt oder über Informationen aus dem Protokoll (HTTP Header). Für andere Dokumenttypen gibt es eventuell andere Möglichkeiten die Sprache festzulegen.
Die jeweiligen language-codes sind in der HTML 4.01 Spezifikation festgelegt.
Syntax
element:lang(language-code) { Style Eigenschaften }
Beispiele
In diesem Beispiel wird der lang Selektor zusammen mit dem Kindkombinator verwendet, um ein Quote-Element auszuwählen. Das ist nicht der einzige korrekte Weg, um diesen Selektor anzuwenden, demonstriert aber ein gutes Anwendungsbeispiel. Hinweis: Es wird Unicode verwendet, um die korrekten Zeichen darzustellen.
Das CSS..
:lang(en) > Q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > Q { quotes: '« ' ' »'; }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A'; }
...mit dem folgendem HTML-Markup...
<div lang="fr"><q>Dieses französische Zitat hat ein <q>geschachteltes</q> Zitat.</q></div> <div lang="de"><q>Dieses deutsche Zitat hat ein <q>geschachteltes</q> Zitat.</q></div> <div lang="en"><q>Dieses englische Zitat hat ein <q>geschachteltes</q> Zitat.</q></div>
...sollte so aussehen:
«Dieses französische Zitat hat ein «geschachteltes» Zitat.»
»Dieses deutsche Zitat hat ein a ‹geschachteltes› Zitat.«
“Dieses englische Zitat hat ein ‘geschachteltes’ Zitat.”
Browser Kompatibilität
| Browser | ab Version |
|---|---|
| Internet Explorer | 8.0 |
| Firefox (Gecko) | 1.0 (1.2) |
| Opera | 8.0 |
| Safari (WebKit) | 3.1 (525) |