Как работает атрибут lang()?

Question

Есть страница с кодом:

<!DOCTYPE html>
<html lang="en">
<head>

    <title>BetAndreas</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body {
            background: #000;
        }
        body:lang(en) {
            background: #c00;
        }
    </style>

</head>
<body>



</body>
</html>

На странице атрибут lang прописан только для тега html. Если язык задан английский, то body имеет красный фон. Если нет, то черный.

Вопрос в следующем. Как браузер определяет язык? Судя по правилам, чтобы CSS-правило body:lang(en) сработало, нужно для body задать атрибут: <body lang="en"></body>

Или браузер берет язык с тега html?

Answer 1

Селекторы :lang(en) и [lang="en"] тем и отличаются, что первому всё равно, откуда взялся язык, а второй требует наличия атрибута на элементе.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}

div {
  border: 1px solid blue;
  padding-left: .5em;
}

div[lang]::before {
  float: right;
  content: 'lang="' attr(lang) '"';
  color: blue;
  border: solid;
  border-width: 0 0 1px 1px;
  padding: .35em 1em;
}

p {
  min-height: 2em;
  line-height: 2em;
  margin: 0;
}

p:lang(en)::after    { content: ":lang(en)";   }
p:lang(ru)::after    { content: ":lang(ru)";   }
p[lang="en"]::before { content: '[lang="en"]'; }
p[lang="ru"]::before { content: '[lang="ru"]'; }

<div>
  <p></p>
  <p lang="en"></p>
  <p lang="ru"></p>
</div>

<div lang="en">
  <p></p>
  <p lang="en"></p>
  <p lang="ru"></p>
</div>

<div lang="ru">
  <p></p>
  <p lang="en"></p>
  <p lang="ru"></p>
</div>

БЛОГ НА HUSL

Как работает атрибут lang()?

Ответы (1 шт):