Selektor atrybutu

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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *