Selektory atrybutów - CSS
Selektor atrybutu o określonej wartości
W jaki sposób określić formatowanie elementu, który posiada określony atrybut o odpowiedniej wartości?
selektor[atrybut="wartość atrybutu"] { cecha: wartość }Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu 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 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 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 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.