Przejdź do treści

Selektory atrybutów

Prosty selektor atrybutu

selektor[atrybut] { cecha: wartość }
Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów].

Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu języka (X)HTML (np. atrybut title="...").

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie to może zostać wykorzystane dla elementów, którym z poziomu (X)HTML został nadany określony atrybut (przy czym jego wartość nie ma znaczenia). Pozwala nadać konkretne cechy elementom, które posiadają właśnie taki atrybut. Na przykład znacznik może być automatycznie napisany czcionką koloru czerwonego, jeśli ma nadany atrybut title="..." (który powoduje wyświetlenie tekstu informacji, po wskazaniu myszką). W tym przypadku nie ma znaczenia jaką wartość ma atrybut, ważne jest jedynie, aby został on nadany.

UWAGA! Polecenie nie interpretuje MSIE 6 (od wersji 7 wszystko jest już w porządku) .

W języku XHTML wszystkie atrybuty w selektorach muszą być pisane małymi literami.

Przykład:

Jeśli w arkuszu stylów strony została umieszczona następująca reguła:
p[title] { color: red }
to każdy akapit, któremu został nadany atrybut title="...", powinien mieć kolor czerwony:

To jest akapit, któremu został nadany atrybut TITLE (aby to sprawdzić, wskaż go myszką) i dlatego powinien być koloru czerwonego.

Dla porównania, to jest inny akapit bez atrybutu TITLE.

Pierwszy z podanych wyżej akapitów powinien być czerwony, a drugi nie. Jeśli używasz Internet Explorera 6, żaden akapit nie będzie czerwony.


Dozwolone jest podanie kilku atrybutów. Wtedy element musi posiadać wszystkie z nich, aby otrzymał formatowanie:

p[title][lang] { color: red }

To jest akapit z atrybutem TITLE oraz LANG (powinien być czerwony).

To jest akapit tylko z atrybutem TITLE (nie powinien być czerwony).

Komentarze

Zobacz więcej komentarzy