Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
CSS/Selektoren/lang()
Aus SELFHTML-Wiki
CSS | Selektoren
Der :lang-Selektor ist eine dynamische Pseudoklasse und selektiert Elemente, deren Sprache mittels des Universalattributs lang festgelegt wurde.
- Syntax
:lang
Beispiel
:lang(fr) { color: red; }
:lang(la) { color: green; }
:lang(es) { color: blue; }
:lang(eo) { color: silver; }
In diesem Beispiel werden die Bezeichnungen in den verschiedenen Sprachen jeweils einer anderen Farbe dargestellt.
Beachten Sie: Ein Element, dessen
lang-Attributwert ein zusammengesetztes Sprachkürzel, wie beispielsweise de-At, ist, wird bereits durch die Angabe von :lang(de) angesprochen.Sie können diese Elemente auch mithilfe eines entsprechenden Attributselektors auswählen.
Wenn die Sprache eines Elements zum Beispiel mit „de“ definiert wurde, spricht die Pseudoklasse:lang(de) aber im Gegensatz zu [lang=de] auch die Nachfahrenelemente dieses Elements an. Selbst wenn für diese kein lang-Attribut (bzw. kein Sprachattribut des XML-Dialekts) gesetzt ist.
Inhaltsverzeichnis
Siehe auch
- Zitate interessant gestalten
- JavaScript-Eigenschaft auslesen Element.lang
- SELF-Forum: Typografie/Satzzeichen/Interpunktion auf Webseiten (bzw. im Blog) vom 18.7.2018
Weblinks
- W3C: lang Selectors Level 4
- Browser-Support: caniuse.com
CSS-Selektoren
- dynamische Pseudoklassen
- :active
- :any-link
- :autofill
- :buffering
- :checked
- :default
- :defined
- :disabled
- :enabled
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :link
- :modal
- :muted
- :not()
- :open
- :optional
- :out-of-range
- :picture-in-picture
- :placeholder-shown
- :popover-open
- :read-only
- :read-write
- :required
- :target
- :target-current
- :user-invalid
- :user-valid
- :valid
- :visited
- :where()
- einfache Selektoren
- Kombinatoren
- Pseudoelemente
- strukturelle Pseudoklassen
Anwendungsbeispiel
Beispiel
ansehen …
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-Beispiel Pseudoklasse lang</title>
<style>
:lang(fr) { color: red; }
:lang(la) { color: green; }
:lang(es) { color: blue; }
:lang(eo) { color: silver; }
</style>
</head>
<body>
<h1>Unterschiedliche Sprachen hervorheben</h1>
<p>Die romanischen Sprachen haben sich aus dem Lateinischen entwickelt. Dies lässt sich zum Beispiel an den Bezeichnungen
für die Wochentage zeigen. Aber auch die Schöpfer von Esperanto bedienten sich bei den romanischen Sprachen.</p>
<p>So wurde zum Beispiel der Donnerstag (lat. <span lang="la">dies Iovis</span>) in der Antike nach dem Gott Jupiter
benannt. Daraus wurde z.B. im Französischen <span lang="fr">jeudi</span> oder im Spanischen <span lang="es">jueves</span>.
Auf esparanto heißt dieser Tag <span lang="eo">Ĵaŭdo</span>.</p>
</body>
</html>
In diesem Beispiel werden die Bezeichnungen für „Donnerstag“ in den verschiedenen Sprachen jeweils in einer anderen Farbe dargestellt.
Umwandlung von Anführungszeichen je nach Sprachangabe
Die Anführungszeichen von Zitaten im Fließtext werden von den Browsern je nach Sprachkürzel im lang-Attribut unterschiedlich gerendert. Dies können Sie aber auch über CSS nachbauen:
Beispiel
:lang(en) {
quotes: "“" "”" "‘" "’";
}
:lang(de) {
quotes: "„" "“" "‚" "‘";
}
:lang(fr) {
quotes: "«" "»" "‹" "›";
}
