Ostatnio edytowany:

:lang()

Autor: Virtual Patriot

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()

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.

Dostępne wartości

ciąg znaków w formie symbolu języka (Norma ISO 639-1)

Wartość domyślna

brak

Dodatkowe techniczne informacje 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" 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()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 8

Edge

tak