Kurs HTML - style: selektory atrybutów









Selektory atrybutów

[ aktualizacja 21.12.2000 ]

Selektory zostały rozszerzone na atrybuty elementów. Jak pamiętamy, elementy mogą przybierać określone atrybuty, na przykład akapit może być wyrównany do prawego marginesu (align=right). Można to wykorzystać do nadawania pewnych wartości: jeśli akapit jest wyrównany do prawej, to jest wyświetlany na czerwono.

Ogólna postać selektora atrybutów jest następująca:

element[atrybut relacja wartość] {deklaracja stylu}

Przykładowo:

P[align=right] {color: red}

akapit justowany do prawej strony, w kolorze czerwonym.

Interpretacja: Netscape 6.

Ilustracja dla użytkowników IE i Opery.



Relacja może być przedstawiona czterema sposobami, co odpowiada czterem typom selektora atrybutów. Jedną z relacji jest zastosowany tu znak =.

a. Prosty selektor atrybutu

Element[atrybut] {deklaracja stylu}

lub

[atrybut] {deklaracja stylu}

Na przykład:

H1[title] {font-family: Verdana; color: yellow}

Każdy tytuł stopnia pierwszego, w którym znajdzie się atrybut title, będzie wyświetlany za pomocą czcionki Verdana w kolorze żółtym.

Tytuł stopnia pierwszego z atrybutem Title

Interpretacja: Netscape 6, Opera 5.

Ilustracja dla użytkowników IE.



[title] {font-family: Helvetica}

Każdy element z atrybutem title (o dowolnej jego wartości) będzie wyświetlany za pomocą czcionki Helvetica.

akapit z title, na niebiesko.

Interpretacja: Netscape 6.

b. Selektor atrybutu o określonej wartości

Element[atrybut="wartość"] {deklaracja stylu}

lub

[atrybut="wartość"] {deklaracja stylu}

Na przykład:

H1[title="rozdział"] {font-family: Times}

Każdy tytuł stopnia pierwszego, w którym znajdzie się atrybut title="rozdział", będzie wyświetlany za pomocą czcionki Times.

[title="ważne"] {font-weight: bold}

Każdy element z atrybutem title="ważne" będzie wyświetlany za pomocą czcionki pogrubionej.

To jest bardzo ważny akapit

Interpretacja: Netscape 6.

Jak łatwo zauważyć, selektor atrybutu o określonej wartości różni się od prostego selektora atrybutu konkretną wartością atrybutu.

Selektor atrybutu o określonej wartości ma jeszcze dwie odmiany, które można przedstawić następująco:

[atrybut~=wartość]

[atrybut|=wartość]

W pierwszej odmianie ciąg znaków podany jako wartość może być fragmentem wartości atrybutu konkretnego elementu. Przykładowo:

H1[title~="rozdział"] {font-family: Times}

Tytuł stopnia pierwszego

Interpretacja: Netscape 6, Opera 5.

Taka postać stylu będzie się odnosić do wszystkich tytułów stopnia pierwszego, w których atrybut title będzie zawierać wyraz rozdział, np. title="rozdział pierwszy", title="rozdział drugi" itd. Zwróćmy uwagę, że wyrazy w title są rozdzielone spacjami.

Druga odmiana została przewidziana do obsługi wartości zawierających dywizy (łączniki). Podanie definicji

*[title|="bleble"] {color: green}

A paragraph in UK-English

spowoduje objęcie nią wszystkich elementów, które mają atrybut title zawierający bleble-a, bleble-b itd. Jest to wykorzystywane np. w obsłudze języków, których kody są rozróżniane, choć początek jest taki sam: en-us, en-uk.

Interpretacja: Netscape 6, Opera 5.

Ilustracja dla użytkowników IE: