Selektor atrybutu

Niemal każdy znacznik języka XHTML/HTML może być uzupełniony o atrybuty przypisane do niego przez specyfikację, np.

<h1 title=”czerwony”>Nagłówek stopnia pierwszego</h1>

Dzięki kolejnej osłonie specyfikacji CSS możemy tak skonstruować selektor, aby odnosił się on do konkretnego znacznika i jego atrybutu. Rozwiązanie to nosi nazwę selektora atrybutu.

Przykład arkusza stylów:

h1[title]
{
color:red;
}

Przykład kodu HTML:

<h1 title=”czarny”>Pierwszy nagłówek z atrybutem</h1>
<h1 title=”czerwony”>Drugi nagłówek z atrybutem</h1>
<h1>Trzeci nagłówek bez atrybutów</h1>

Efektem działania powyższych listingów będzie wyświetlenie wszystkich nagłówków stopnia pierwszego z atrybutem title za pomocą koloru czerwonego. Natomiast nagłówki bez atrybutu zachowają domyślne formatowanie.

Idąc za ciosem, można jeszcze dokładniej przypisać formatowanie i uzależnić je od wartości, jaką przybiera wybrany atrybut.

h1[title=czerwony]
{
color:red;
}

Przykład kodu HTML:

<h1 title=”czarny”>Pierwszy nagłówek z atrybutem</h1>
<h1 title=”czerwony „>Drugi nagłówek z atrybutem</h1>
<h1>Trzeci nagłówek bez atrybutów</h1>

W tym przypadku tylko drugi z przykładowych nagłówków będzie wyświetlony za pomocą koloru czerwonego, ponieważ tylko jego atrybut oraz wartość odpowiadają definicji stylu w przykładowym arkuszu.

Atrybut selektora jest poprawnie obsługiwany przez nowe wersje Mozilla Firefox oraz Opery. Użytkownicy starszych przeglądarek oraz MS Internet Explorera muszą obejść się ze smakiem.