Selektor :lang() odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :lang().
Cechy elementu HTML spełniają zasadę pseudoklasy :lang(), gdy w danym momencie dany element HTML posiada wartość atrybutu lang o określonej przez nas wartości lub gdy w danym momencie dany element HTML dziedziczy od innego elementu HTML wartość atrybutu lang o określonej przez nas wartości.
Selektor :lang() odszukuje elementy HTML w kodzie HTML na podstawie parametru language, którego wartość musimy określić.
Parametry selektora :lang()
language
Przykładowe zapisy
:lang(pl)
:lang(en)
:lang(de)
language
Parametr language jest wymaganym parametrem selektora :lang(). Parametr language określa, na podstawie jakiej interesującej nas wartości selektor :lang() powinien dokonać selekcji.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kurs CSS</title>
<style>
p:lang(pl) {
color:red;
}
</style>
</head>
<body>
<p lang="pl">
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", który posiada atrybut "lang" o wartości "pl"
</p>
<div lang="pl">
<p>
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", który dziedziczy wartość "pl" atrybutu "lang" od swojego elementu rodzica
</p>
<p>
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", który dziedziczy wartość "pl" atrybutu "lang" od swojego elementu rodzica
</p>
<p lang="en">
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", który posiada atrybut "lang" o wartości "en", a nie o wartości "pl"
</p>
</div>
<div lang="pl">
tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, mimo że ten element HTML posiada atrybut "lang" o wartości "pl", ponieważ ten element HTML nie jest elementem "p"
</div>
</body>
</html>
