Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E[foo$="bar"]

[CSS Selector] E[foo$="bar"]

Using 'selector[attribute$=value]', you can apply styles only to elements where a specific attribute's value ends with the given string. This does not work in IE6 and below.

For example, if the value is function, it would match strings like on, tion, or nction — anything that appears at the end of the value.

Sample Code

p[title$=hoge] { color: red;} /* Applies to p elements whose title attribute value ends with 'hoge'. */
p[title$=hoge1] { color: blue;} /* Applies to all p elements whose title attribute value ends with 'hoge1'. */
[title$=Hatsune-Miku] { color: green;} /* Non-ASCII characters work here too. */

Browser Preview

p[title$=hoge] { color: red;} /* Applies to p elements whose title attribute value ends with 'hoge'. */
p[title$=hoge1] { color: blue;} /* Applies to all p elements whose title attribute value ends with 'hoge1'. */
[title$=Hatsune-Miku] { color: green;} /* Non-ASCII characters work here too. */

<p title="hoge">This is a p element. The title is set to 'hoge'.</p>
<p title="hoge hogehoge1">This is a p element. The title is set to 'hoge hogehoge1'.</p>
<p title="IA and Hatsune-Miku">This is a p element. The title attribute is set to 'IA and Hatsune-Miku'.</p>