:lang

Псевдокласс :lang выбирает элементы, в зависимости от их языка, который определяется комбинацией атрибута lang, тега <meta> и иногда информацией из протокола передачи данных (такой, как заголовки HTTP).

Предложениям будут присвоены стили, в зависимости от языка, который указан в атрибуте lang тега <p>.

        
          
          <blockquote lang="de">  <p>Der Mensch, versuche die Gotter nicht.</p></blockquote><blockquote lang="fr">  <p>Ce que femme veut, Dieu le veut.</p></blockquote><blockquote lang="en">  <p>То be or not to be.</p></blockquote>
          <blockquote lang="de">
  <p>Der Mensch, versuche die Gotter nicht.</p>
</blockquote>

<blockquote lang="fr">
  <p>Ce que femme veut, Dieu le veut.</p>
</blockquote>

<blockquote lang="en">
  <p>То be or not to be.</p>
</blockquote>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          blockquote p::before {  content: open-quote;}blockquote p::after {  content: close-quote;}blockquote:lang(de) {  quotes: "„" "“";}blockquote:lang(fr) {  quotes: "«" "»";}blockquote:lang(en) {  quotes: "“" "”";}
          blockquote p::before {
  content: open-quote;
}

blockquote p::after {
  content: close-quote;
}

blockquote:lang(de) {
  quotes: "„" "“";
}

blockquote:lang(fr) {
  quotes: "«" "»";
}

blockquote:lang(en) {
  quotes: "“" "”";
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

После любого селектора ставим двоеточие и пишем ключевое слово lang. В скобках указываем, для какого языка применяются правила. Список доступных языков можно посмотреть в ISO 639-1 Language Codes.

        
          
          p:lang(es) {  background-color: orange;  font-size: 16px;}
          p:lang(es) {
  background-color: orange;
  font-size: 16px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

💡 Тег <q> автоматически изменяет вид кавычек в зависимости от языка.

        
          
          <p><q lang="ru">слово</q></p><p><q lang="es">palabra</q></p><p><q lang="pl">cześć</q></p>
          <p><q lang="ru">слово</q></p>
<p><q lang="es">palabra</q></p>
<p><q lang="pl">cześć</q></p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать