Przejdź do treści

Selektory atrybutów

Selektor atrybutu zawierającego łączniki

selektor[atrybut|="początek"] { cecha: wartość }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu (X)HTML (np. atrybut lang="..."), którego wartość składa się z wyrazów rozdzielonych łącznikami (myślnikami).

"Początek" to określony wyraz, od którego rozpoczyna się wartość atrybutu.

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie to może zostać wykorzystane dla elementów, którym z poziomu (X)HTML został nadany atrybut, o wartości składającej się z kilku wyrazów rozdzielonych łącznikami (myślnikami). Reguła taka pozwala nadać konkretne cechy elementom, posiadającym atrybut, którego wartość rozpoczyna się od podanego wyrazu. Na przykład składnia lang|="en" kojarzy atrybuty: lang="en-us" lub lang="en-au", jak również lang="en".

Selektor taki został przewidziany do obsługi języków (atrybut LANG), których skróty zawierają często łączniki (np. "en-us" to język angielski w Stanach Zjednoczonych, "en-au" to język angielski w Australii).

UWAGA! Polecenie nie interpretuje MSIE 6 (od wersji 7 wszystko jest już w porządku).

W języku XHTML wszystkie atrybuty w selektorach muszą być pisane małymi literami.

Przykład:

Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:
p[title|="to"] { color: red }
to każdy akapit, któremu został nadany atrybut TITLE z wartością, która rozpoczyna się od "to" (i może składać się z łączników), powinien mieć kolor czerwony:

To jest akapit, któremu został nadany atrybut title="to-jest-akapit" (aby to sprawdzić, wskaż go myszką) i dlatego jest koloru czerwonego.

A to jest akapit z atrybutem title="to-też-jest-akapit" i też powinien być czerwony.

Dla porównania, to jest akapit bez atrybutu TITLE.

A to jest akapit z atrybutem title="także-i-to-jest-akapit" (nie powinien być czerwony)

Pierwszy i drugi z podanych wyżej akapitów powinny być czerwone. Natomiast trzeci i czwarty nie. Jeśli używasz Internet Explorera 6, żaden akapit nie będzie czerwony.

Komentarze

Zobacz więcej komentarzy