SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
CSS/Selektoren/lang
Aus SELFHTML-Wiki
< CSS | Selektoren
Der Begriff lang ist mehrdeutig.lang ist eine CSS-Pseudoklasse, die Elemente selektiert, deren Sprache mittels des Universalattributs
lang festgelegt wurde.
- ein Universal-Attribut für HTML-Elemente
- eine JavaScript-Eigenschaft Element.lang.
Der :lang-Selektor ist eine dynamische Pseudoklasse und selektiert Elemente, deren Sprache mittels des Universalattributs lang festgelegt wurde.
| Syntax | :lang
|
|---|---|
| Browsersupport | Details: caniuse.com |
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
- CSS/Tutorials/Selektoren/Pseudoklasse
- SELF-Forum: Typografie/Satzzeichen/Interpunktion auf Webseiten (bzw. im Blog) vom 18.7.2018
Weblinks
- W3C: lang Selectors Level 4
Liste der CSS-Selektoren
- Pseudoklassen
- einfache Selektoren
- Kombinatoren
- Pseudoelemente
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: "«" "»" "‹" "›";
}
