Selektory atrybutów - CSS
Prosty selektor atrybutu
W jaki sposób określić formatowanie elementu, który posiada określony atrybut?
selektor[atrybut] { cecha: wartość }Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu języka 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 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 nazwy atrybutów 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).