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: Chrome 4, Firefox 3.5, Edge 12, Opera 10, Safari 3.2)
selektor[atrybut^="początek"] { cecha: wartość }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.