Przejdź do treści

Selektory atrybutów

Selektor atrybutu zawierającego określony wyraz

selektor[atrybut~="wyraz"] { 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 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 (X)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 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~="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).

Zobacz także

atrybut (12), wyraz (2)

Komentarze

Zobacz więcej komentarzy

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...