Selektory atrybutów

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.

Style te najlepiej jest definiować w nagłówku strony lub w zewnętrznym arkuszu.

Interpretacja: Netscape 6, Opera 7, Internet Explorer 7

Relacja może być przedstawiona czterema sposobami, co odpowiada czterem poniższym 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:green}

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

Tytuł stopnia pierwszego z atrybutem Title

Interpretacja: Netscape 6, Opera 5, Internet Explorer 7.

[title] {font-family: Georgia}

Dowolny element z atrybutem title (o dowolnej jego wartości) będzie wyświetlany za pomocą czcionki Georgia.

<p title="akapit">Akapit z atrybutem title, zapisany czcionką Georgia.</p>

Akapit z atrybutem title, zapisany czcionką Georgia.

Interpretacja: Netscape 6, Opera 7, Internet Explorer 7.

b. Selektor atrybutu o określonej wartości

Selektor ten określa formatowanie, gdy atrybut ma konkretną wartość.

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

lub

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

Na przykład:

h2[title="rozdział"] {font-family: Impact}

Treść tytułu

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

[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, Internet Explorer 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:

c. Selektor atrybutu zawierający ciąg znaków ze spacjami

[atrybut~=wartość]

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

h3[title~="rozdział"] {font-family:Georgia}

<h3 title="to jest kolejny rozdział">Tytuł stopnia trzeciego</h3>

Tytuł stopnia trzeciego

Interpretacja: Netscape 6, Opera 5, Internet Explorer 7.

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.

d. Selektor atrybutu zawierający ciąg znaków z dywizami

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

[atrybut|=wartość]

Podanie w arkuszu definicji:

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

spowoduje objęcie nią wszystkich elementów, które mają atrybut title zawierający en-a, en-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.

A paragraph in UK-English

Interpretacja: Netscape 6, Opera 5, Internet Explorer 7.