Search
Close this search box.

CSS Pseudoklassen für mehrsprachige Webseiten – So gestaltest du die Sprachauswahl

Wenn du eine Webseite betreibst, die in mehreren Sprachen verfügbar ist, weißt du, wie wichtig es ist, eine klare Sprachauswahl zu gestalten. In diesem Tutorial zeigen wir dir, wie du mit CSS-Pseudoklassen deine Sprachauswahl optisch ansprechender und benutzerfreundlicher gestalten kannst.

Die :lang()-Pseudoklasse ist ein leistungsfähiges Werkzeug, das du nutzen kannst, um Textelemente in unterschiedlichen Sprachen optisch hervorzuheben. Indem du die Hintergrundfarbe und Schriftart für bestimmte Sprachen anpasst, kannst du eine klare Struktur schaffen und deinen Benutzern eine einfache Navigation ermöglichen.

Beginnen wir mit einem Beispiel: Angenommen, du möchtest auf deiner Webseite Deutsch und Englisch als Sprachoptionen anbieten. Du hast bereits alle Textelemente in beiden Sprachen verfügbar gemacht und möchtest nun die Sprachauswahl optisch hervorheben.

Zunächst musst du deinen Textelementen Sprachattribute zuweisen. Dafür kannst du das lang-Attribut im HTML-Code verwenden. Zum Beispiel:

				
					<p lang="en">This is some English text.</p>
<p lang="de">Dies ist ein deutscher Text.</p>

				
			

Damit hast du den Textelementen die Sprachen Englisch und Deutsch zugewiesen. Nun kannst du die :lang()-Pseudoklasse verwenden, um diese Sprachen optisch zu gestalten. Zum Beispiel:

				
					p:lang(en) {
  font-family: Arial, sans-serif;
  background-color: #fff;
  color: #333;
}

p:lang(de) {
  font-family: Helvetica, sans-serif;
  background-color: #f5f5f5;
  color: #666;
}

				
			

Mit diesen CSS-Regeln wird der englische Text in Arial-Schrift und mit weißem Hintergrund dargestellt, während der deutsche Text in Helvetica-Schrift und mit einem grauen Hintergrund dargestellt wird.

Natürlich kannst du die :lang()-Pseudoklasse auch für andere Elemente als Text verwenden, wie z.B. Bilder oder Links. Indem du verschiedene Hintergrundbilder oder Farben für bestimmte Sprachen verwendest, kannst du auch hier eine klare Struktur schaffen und die Navigation erleichtern.

Das Hervorheben von Textelementen in unterschiedlichen Sprachen ist ein wichtiger Schritt, um deine Webseite ansprechender und benutzerfreundlicher zu gestalten. Mit der :lang()-Pseudoklasse hast du ein leistungsfähiges Werkzeug zur Hand, um deine Sprachauswahl optisch zu gestalten und deinen Benutzern eine einfache Navigation zu ermöglichen.

Möchtest du mehr über CSS und Webentwicklung lernen? Dann schau doch mal in unseren HTML und CSS Komplettkurs rein!