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