Przejdź do treści

Selektory atrybutów

Selektor atrybutu o określonej wartości

selektor[atrybut="wartość atrybutu"] { 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="...").

"Wartość atrybutu" to określona wartość, która została nadana temu atrybutowi (np. treść atrybutu title="...").

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, który ma określoną wartość. Pozwala nadać konkretne cechy elementom, które posiadają atrybut, właśnie z taką dokładnie wartością. Na przykład znacznik może być automatycznie napisany czcionką koloru czerwonego, jeśli ma nadany atrybut title="...", o wartości podanej w deklaracji stylu. Znaczniki z atrybutem title="..." o innej wartości nie będą już czerwone.

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 jest akapit"] { color: red }
to każdy akapit, któremu został nadany atrybut title="..." o wartości "To jest akapit", 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.

Dla porównania, to akapit bez atrybutu TITLE.

A to jest akapit z atrybutem TITLE o innej wartości niż w regule stylu.

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


Dozwolone jest podanie kilku atrybutów. Wtedy element musi posiadać wszystkie z nich i każdy musi mieć przypisaną wyszczególnioną wartość, aby otrzymał formatowanie:

p[title="To jest akapit"][lang="pl"] { color: red }

To jest akapit, któremu został nadany atrybut title="To jest akapit" oraz lang="pl" (powinien być czerwony).

To jest akapit, któremu został nadany atrybut title="Akapit" oraz lang="pl" (nie powinien być czerwony).


Inne przydatne zastosowanie tego selektora to np. zmiana sposobu formatowania elementów formularzy. Niemal wszystkie kontrolki formularza są tworzone przy użyciu znacznika <input type="..." />. O tym jaki rodzaj pola zobaczymy na ekranie, decyduje atrybut type="...". Jeśli chcielibyśmy zmienić rodzaj obramowania dla wszytkich pól tekstowych (type="text"), tak aby nie wpłynęło to na pola innego typu (np. na przycisk wysłania formularza - type="submit"), należałoby wpisać np. taką regułę:

input[type="text"] { border: 1px solid black }

Niestety również ta deklaracja nie jest interpretowana przez MSIE 6 :-(. Jedynym rozwiązaniem problemu wydaje się użycie klasy selektorowej dla każdego pojedynczego znacznika pola tekstowego w formularzu. Wtedy przynajmniej będzie można określić wszystkie własności formatowania elementu w jednym miejscu (arkuszu stylów), co znacznie ułatwi i przyspieszy ewentualne późniejsze modyfikacje.

Komentarze

Zobacz więcej komentarzy