Odkrywamy zaawansowane techniki CSS: złożone selektory

Selektory atrybutów pozwalają na odnoszenie się do elementów według wartości ich konkretnych atrybutów. Można więc skonstruować selektor, który będzie się odnosił do dowolnych elementów w Twoim HTML-u, pod warunkiem, że mają określoną (na przykład)  klasę.

Istnieje sześć  typów takich selektorów:

• [att=value] Atrybut musi mieć dokładnie określoną wartość.
• [att~=value] Wartość atrybutu musi być dokładnie taka jak określona, przy czym może on być jednym z wielu, oddzielonych spacjami. Przykład: [class~=sidebar] będzie pasowało do <div class=”sidebar highlight”>.
• [att|=value] Wartość atrybutu to dokładnie “value” lub też zaczyna się od “value”, a zaraz po nim następuje myślnik.
• [att^=value] Wartość atrybutu zaczyna się od “value”.
• [att$=value] Wartośc atrybutu kończy się na “value”.
• [att*=value] Wartośc atrybutu zawiera “value”.

Na przykład, gdy chcesz zmienić kolor tła wszystkich elementów, których klasa zawiera “post”, użyj poniższego kodu:

Zastosowanie selektorów atrybutów ułatwia także dodawanie różnych ikon obok linków do plików różnych typów.

W powyższym przykładzie zastosowano selektory atrybutów – te odnoszą się do linków, których atrybuty href kończą się na .jpg, .pdf oraz .doc.

Obsługa przez przeglądarki

Selektory atrybutów są obsługiwane przez wszystkie nowe przeglądarki, oprócz nadal popularnego Internet Explorer 6. Jeśli w swoich CSS-ach stosujesz wyżej wspomniane selektory, pamiętaj, aby dla użytkowników IE6 zapewnić funkcjonalną wersję strony. Wersja dla IE6 nie musi być identyczna (jeśli tylko nie jest to wymagane) z tymi przeznaczonymi dla pozostałych przeglądarek – jeśli chcesz zastosować selektory atrybutów do mało ważnych elementów, które tylko „dodają uroku”, nie przejmuj się IE6 i zrób to.