Selektory atrybutów - CSS
Selektor atrybutu o wartości kończącej się na...
W jaki sposób zmienić wygląd elementu, który posiada atrybut o wartości zakończonej podanym tekstem?
(CSS 3 - interpretuje: Chrome 4, Firefox 3.5, Edge 12, Opera 10, Safari 3.2)
selektor[atrybut$="koniec"] { 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
"Koniec" to określony tekst, którym kończy się wartość atrybutu.
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.
Atrybut oznacza konkretny parametr nadany znacznikowi z poziomu HTML (np. atrybut
title="...")."Koniec" to określony tekst, którym kończy się wartość atrybutu.
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.
Przykład
Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:p[title$="akapit"] { color: red }to każdy akapit, któremu został nadany atrybut TITLE z wartością, która kończy się na "akapit", 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="to jest akapit także" (nie powinien być czerwony)
Pierwszy i drugi z podanych wyżej akapitów powinny być czerwone. Natomiast trzeci i czwarty nie.