селектор lang
Описание: Выбирает все элементы заданного языка.
-
версия добавлена: 1.9jQuery( ":lang(язык)" )
язык: Код языка.
Селектор :lang() соответствует элементам, у которых значение языка равно предоставленному коду языка или начинается с предоставленного кода языка, за которым сразу следует "-". Например, селектор $("div:lang(en)") будет соответствовать <div lang="en"> и <div lang="en-us"> (и любому из их потомков <div>), но не <div lang="fr">
Для HTML-элементов значение языка определяется атрибутом lang и, возможно, информацией из элементов meta или заголовков HTTP.
Дополнительные сведения об этом использовании можно найти в спецификации CSS W3C.
Пример:
Окрашивание элементов div в соответствии с их языком.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>lang demo</title>
<style>
body {
background-color: #ccc;
}
h3 {
margin: .25em 0;
}
div {
line-height: 1.5em
}
.usa {
background-color: #f00;
color: #fff;
}
.usa .usa {
background-color: #fff;
color: #000;
}
.usa .usa .usa {
background-color: #00f;
color: #fff;
}
.spain {
background-color: #f00;
color: #ff0;
}
.spain .spain {
background-color: #ff0;
color: #f00;
line-height: 3em;
}
.spain .spain .spain {
background-color: #f00;
color: #ff0;
line-height: 1.5em;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<h3>USA</h3>
<div lang="en-us">red
<div>white
<div>and blue</div>
</div>
</div>
<h3>España</h3>
<div lang="es-es">rojo
<div>amarillo
<div>y rojo</div>
</div>
</div>
<script>
$( "div:lang(en-us)" ).addClass( "usa" );
$( "div:lang(es-es)" ).addClass( "spain" );
</script>
</body>
</html>