## 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, Opera 7.

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, Opera 7.

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, Opera 7.

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: