Atrybut języka :lang
W jaki sposób zmienić wygląd elementów, zawierających tekst w wybranym języku?
selektor:lang(język) { cecha: wartość }Jako "język" należy wpisać nazwę języka, np. pl - polski, en - angielski).
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.
Polecenie pozwala nadać określone atrybuty formatowania dla elementów, którym został nadany z poziomu HTML atrybut języka lang="..." [zobacz: Skróty nazw języków]. Różnica pomiędzy selektorem atrybutu [lang|="..."] a pseudoklasą :lang(...) polega na tym, że w pierwszym przypadku element musi mieć bezpośrednio przypisany atrybut lang="...", podczas gdy użycie pseudoklasy pozwala na bardziej inteligentny wybór - uwzględniając dziedziczenie języka określonego przez inne źródła, tj. nagłówek HTTP Content-Language, język strony, propagację atrybutu lang="..." przypisanego dla elementu nadrzędnego:
<body lang="pl"> <p>Ten akapit jest napisany w języku polskim.<p> </body>
/* Ta reguła zostanie zastosowana: */ p:lang(pl) { color: red } /* Ta reguła nie zostanie zastosowana: */ p[lang|="pl"] { color: blue }
Przykład :lang
Po wpisaniu w arkuszu stylów:p:lang(en) { color: red } div:lang(en) { border: 1px solid red }a następnie w kodzie źródłowym:
<p lang="en">1. This is paragraph with attribute <b>lang="en"</b>.</p> <p lang="en-US">2. This is paragraph with attribute <b>lang="en-US"</b>.</p> <div lang="en">This is block with attribute <b>lang="en"</b>... <p>3. This is paragraph inside block, but without attribute lang.</p> <p lang="pl">4. To jest akapit wewnątrz bloku, który posiada atrybut <b>lang="pl"</b> i dlatego jego wygląd nie zmieni się, pomimo że blok nadrzędny posiada atrybut lang="en".</p> ...and this is end of block.</div>
Na ekranie powinniśmy otrzymać pierwsze trzy akapity napisane kolorem czerwonym, a ostatni bez zmian:
1. This is paragraph with attribute lang="en".
2. This is paragraph with attribute lang="en-US".
3. This is paragraph inside block, but without attribute lang.
4. To jest akapit wewnątrz bloku, który posiada atrybut lang="pl" i dlatego jego wygląd nie zmieni się, pomimo że blok nadrzędny posiada atrybut lang="en".
...and this is end of block.- Pierwszy akapit ma bezpośrednio przypisany atrybut
lang="en". - Drugi
lang="en-US"(zwróć uwagę, że pseudoklasa:lang()obsługuje łączniki w skrótach nazw języków - np. en-US). - Trzeci nie ma atrybutu
lang, ale znajduje się wewnątrz bloku z atrybutemlang="en". - Ostatni akapit również znajduje się w tym bloku, ale posiada przypisany oddzielnie atrybut
lang="pl"i tylko ten jeden akapit nie jest czerwony.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
:lang | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 8 2005-04-19 | 3.1 2008-03-18 |