Przejdź do treści

Selektory atrybutów - CSS

Selektor atrybutu o wartości rozpoczynającej się od...

W jaki sposób zmienić wygląd elementu, który posiada atrybut o wartości rozpoczętej podanym tekstem?

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

selektor[atrybut^="początek"] { 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="...").

"Początek" to określony tekst, którym rozpoczyna się wartość atrybutu.

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

Podobnie jak w przypadku selektora z łącznikami polecenie to pozwala wybrać element z atrybutem o wartości, która ma na początku wymagany tekst, ale po niej nie musi być już żadnego łącznika.

Przykład

Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:
p[title^="to"] { color: red }
to każdy akapit, któremu został nadany atrybut TITLE z wartością, która rozpoczyna się od "to", powinien mieć kolor czerwony:

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

A to jest akapit z atrybutem title="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="także i to jest akapit" (nie powinien być czerwony)

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

Komentarze

Zobacz więcej komentarzy

Facebook