CSS приклад: Псевдокласс :lang

Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 2.0+ 8.0+ 3.1+ 1.0+ 2.1+ 2.0+

Коротка інформація

ЗастосовуєтьсяДо всіх елементів
Посилання на специфікацію http://www.w3.org/TR/CSS21/selector.html#lang

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Визначає мову, яка використовується в документі або його фрагменті. За допомогою псевдокласу :lang можна задавати певні налаштування, характерні для різних мов, наприклад, вид лапок у цитатах.

Синтаксис

елемент:lang(<мова>) { ... }

Значення

В якості мови можуть виступати наступні значення: ru — російська; en — англійська ; de — німецька; fr — французька; it — італійська та інші.

Приклад

HTML5CSS2.1IECrOpSa 5.1Fx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>lang</title>
  <style>
   p {
    font-size: 1.5em; /* Розмір тексту */ 
   }
   q:lang(de) {
    quotes: "\201E" "\201C"; /* Вид лапок для німецької мови */ 
   }
   q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид лапок для англійської мови */ 
   }
   q:lang(fr), q:lang(ru) { /* Вид лапок для російської та французької мови */ 
    quotes: "\00AB" "\00BB"; 
   }
  </style>
 </head>
 <body>
  <p>Цитата на французькій мові: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p>
  <p>Цитата на німецькій: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
  <p>Цитата на англійській: <q lang="en">То be or not to be</q>.</p>
 </body>
</html>

Результат даного прикладу показаний на рис. 1. Для відображення типових лапок у прикладі використовується стильове властивість quotes, а саме перемикання мови і відповідного виду лапок відбувається через атрибут lang, що додається до тегу <q>.

Рис. 1. Результат використання псевдокласу :lang

Часті запитання

  • Q: Як використовувати псевдоклас :lang в CSS?

    A: Псевдоклас :lang використовується для визначення стилів тексту в залежності від мови, вказаної в атрибуті lang елемента.

  • Q: Як вказати мову для елемента з використанням псевдокласу :lang?

    A: Для вказання мови елемента використовується атрибут lang, наприклад: <p lang='en'>English Text</p>.

  • Q: Як визначити стилі для конкретної мови за допомогою :lang в CSS?

    A: Стилі для конкретної мови визначаються через вказання селектора :lang з відповідним кодом мови, наприклад: p:lang(en) { color: blue; }.

  • Q: Чи можна використовувати :lang для більш ніж однієї мови одночасно?

    A: Так, можна використовувати :lang для специфікації стилів для кількох мов одночасно, наприклад: p:lang(en), p:lang(fr) { font-weight: bold; }.

  • Q: Де краще використовувати псевдоклас :lang в CSS?

    A: Псевдоклас :lang рекомендується використовувати для визначення стилів тексту, який відображається на різних мовах на веб-сайті.