CSS/Selektoren/Pseudoklasse/lang

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels ist mehrdeutig. lang ist

  • ein Universal-Attribut für HTML-Elemente
  • eine CSS-Pseudoklasse, die Elemente selektiert, deren Sprache mittels des Universalattributs lang festgelegt wurde.
  • eine JavaScript-Eigenschaft Element.lang.



Mit der Pseudoklasse :lang() lassen sich Elemente selektieren, deren Sprache mittels des Universalattributs lang festgelegt wurde.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
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.
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.

Anwendungsbeispiel[Bearbeiten]

Umwandlung von Anführungszeichen je nach Sprachangabe[Bearbeiten]

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: "«" "»" "‹" "›";
    }

Siehe: SELF-Forum: Typografie/Satzzeichen/Interpunktion auf Webseiten (bzw. im Blog) vom 18.7.2018