Przejdź do treści

Selektory pseudoklas

Atrybut języka

selektor:lang(język) { cecha: wartość }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].
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 (X)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, znacznik <meta />, 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 }

UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

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".

This is block with attribute lang="en"...

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.
  1. Pierwszy akapit ma bezpośrednio przypisany atrybut lang="en".
  2. Drugi lang="en-us" (zwróć uwagę, że pseudoklasa :lang() obsługuje łączniki w skrótach nazw języków - np. en-us).
  3. Trzeci nie ma atrybutu lang, ale znajduje się wewnątrz bloku z atrybutem lang="en".
  4. Ostatni akapit również znajduje się w tym bloku, ale posiada przypisany oddzielnie atrybut lang="pl" i tylko ten jeden akapit nie jest czerwony.

Zobacz także

Więcej tematów

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...