Autor publikacji: Virtual Patriot - Administrator

:lang()

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - the :lang() pseudo-class (LV3)

Przeznaczenie selektora `:lang()`

      :lang(...) { ... }

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.

Informacje techniczne o selektorze `:lang()`

ograniczenie - elementy HTML: brak
ograniczenie - właściwości CSS: brak

Przykładowa reguła CSS, selektor `:lang()`

p:lang(pl) {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:lang(pl) { color:red; }

p:lang(pl): do każdego elementu p, który posiada atrybut lang o wartości pl lub który dziedziczy wartość pl atrybutu lang od innego elementu HTML
color: dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
red: na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy 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>

Rezultat

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"

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

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"

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"

Interpretacja selektora `:lang()`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 8
: tak