CSS :lang() Pseudoklasse

Die :lang()-Pseudoklasse wählt ein Element basierend auf seiner ermittelten Sprache aus.

Die in HTML ermittelte Sprache basiert auf einer Kombination aus dem lang-Attribut (z. B. <html lang="it">), dem <meta>-Tag und Informationen vom Protokoll (z. B. HTTP-Headern).

Der Wert des lang-Attributs ist ein zweistelliger Sprachcode, wie lang="it" für Italienisch, oder zwei kombinierte Sprachcodes, wie lang="fr-ca" für kanadisches Französisch.

Mit dem :lang()-Selektor kann die Art der Anführungszeichen für Zitate auf einer Seite festgelegt werden.

Version

CSS Selectors

CSS Selectors Level 3

Syntax

CSS-Syntax für :lang()

css

:lang() {
  css declarations;
}

Beispiel für den lang()-Selektor mit dem Wert „fr“ für Französisch:

CSS-Codebeispiel für :lang()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:lang(fr) {
        background: #1c87c9;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <p>I am from France.</p>
    <p lang="fr">Je m'appelle Ann</p>
  </body>
</html>

Try it Yourself »

In the following example, the :lang() pseudo-class is used to match the parents of quote elements using child combinators.

Beispiel für den :lang()-Selektor unter Verwendung von Child-Kombinatoren.

Ein weiteres CSS-Codebeispiel für :lang()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      :lang(en) > q {
        quotes: '\201C' '\201D' '\2018' '\2019';
      }
      :lang(fr) > q {
        quotes: '« ' ' »';
      }
    </style>
  </head>
  <body>
    <h2>:lang() selector example</h2>
    <div lang="en">
      <q>Lorem ipsum is simply dummy text</q>
    </div>
    <div lang="fr">
      <q>Lorem ipsum is simply dummy text</q>
    </div>
  </body>
</html>

Try it Yourself »

Practice

Was bewirkt die :lang-Pseudoklasse in CSS?

Sie ermöglicht die Auswahl von Elementen mit einem bestimmten Sprachattribut.Sie ermöglicht die Formatierung von Text in einer bestimmten Sprache.Sie ermöglicht die Übersetzung von Text von einer Sprache in eine andere.Sie ermöglicht die Anwendung verschiedener Stile auf verschiedene Textabschnitte.Sie ändert die Sprache des Textes.

CSS :lang() Pseudoklasse ​

Version ​

Syntax ​

Beispiel für den lang()-Selektor mit dem Wert „fr“ für Französisch: ​