Selektory atrybutów - CSS
Selektor atrybutu zawierającego łączniki
Jak zmienić wygląd elementów, które mają podane atrybuty z określonymi łącznikami, np. "en-US"?
selektor[atrybut|="początek"] { cecha: wartość }Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu 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 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 nazwy atrybutów 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.