Selektory atrybutów - CSS
Selektor atrybutu zawierającego określony wyraz
W jaki sposób określić formatowanie elementu, który posiada określony atrybut zawierający podany wyraz?
selektor[atrybut~="wyraz"] { cecha: wartość }Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut
title="..."), którego wartość składa się z wyrazów rozdzielonych spacjami."Wyraz" to określone słowo, zawierające się w wartości atrybutu, które nie może zawierać spacji.
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 spacjami. Deklaracja taka pozwala nadać konkretne cechy elementom, posiadającym atrybut, w którego wartości występuje podany wyraz (oprócz niego mogą występować tam również inne wyrazy). Wyraz nie może zawierać spacji! Na przykład deklaracja title~="jest" kojarzy atrybuty: title="To jest akapit" lub title="To jest pogrubienie" itd.
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~="jest"] { color: red }to każdy akapit, któremu został nadany atrybut
title="..." o wartości, w której występuje wyraz "jest", powinien mieć kolor czerwony:To jest akapit, któremu został nadany atrybut TITLE o wartości "To jest akapit" (aby to sprawdzić, wskaż go myszką) i dlatego jest koloru czerwonego.
A to jest akapit z atrybutem TITLE o wartości "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 o wartości, w której nie występuje wyraz "jest" (również nie jest 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.
Dozwolone jest podanie kilku atrybutów lub/i wyrazów. Wtedy element musi posiadać wszystkie z nich i każdy musi zawierać wyszczególniony wyraz, aby otrzymał formatowanie:
p[title~="jest"][lang~="pl"] { color: red }
To jest akapit, któremu został nadany atrybut title="To jest akapit" i lang="pl" (powinien być czerwony).
To jest akapit, któremu został nadany atrybut title="Akapit" i lang="pl" (nie powinien być czerwony).
p[title~="jest"][title~="akapit"] { color: red }
To jest akapit, któremu został nadany atrybut title="To jest akapit" (powinien być czerwony).
To jest akapit, któremu został nadany atrybut title="akapit" (nie powinien być czerwony).