Przejdź do treści

Selektory atrybutów - CSS

Selektor atrybutu zawierającego określony tekst

W jaki sposób określić formatowanie elementu, który posiada określony atrybut zawierający podany tekst?

(CSS 3 - interpretuje Internet Explorer 7.0, Firefox, Opera, Chrome)

selektor[atrybut*="tekst"] { 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 HTML (np. atrybut title="...").

"Tekst" to określony napis, zawierający się w wartości atrybutu, który może zawierać również spacje.

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

Działa podobnie jak selektor atrybutu z podanym wyrazem, jednak pozwala dopasować nie tylko pełne wyrazy, ale dowolną ich część (np. kilka sylab) czy nawet kilka wyrazów.

Przykład

Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:
p[title*="jest aka"] { color: red }
to każdy akapit, któremu został nadany atrybut title="..." o wartości, w której występuje tekst "jest aka", powinien mieć kolor czerwony:

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

A to jest akapit z atrybutem TITLE o wartości "To też jest akapit" i też powinien być czerwony.

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

A to jest akapit z atrybutem TITLE o wartości, w której nie występuje wyraz "jest" (również nie jest czerwony).

Pierwszy i drugi z podanych wyżej akapitów powinny być czerwone. Natomiast trzeci i czwarty - nie.

Komentarze

Zobacz więcej komentarzy

Facebook