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 starts with the given string. This does not work in IE6 and below.

For example, if the value is function, it would match strings like fu, func, or funct — anything that appears at the beginning of the value.

Sample Code

p[title^=hoge] { color: red;} /* Applies to p elements whose title attribute value starts with 'hoge'. */
p[title^=hoge1] { color: blue;} /* Applies to all p elements whose title attribute value starts 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 starts with 'hoge'. */
p[title^=hoge1] { color: blue;} /* Applies to all p elements whose title attribute value starts 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="hoge1hoge fuga">This is a p element. The title is set to 'hoge1hoge fuga'.</p>
<p title="Hatsune-Miku and IA">This is a p element. The title attribute is set to 'Hatsune-Miku and IA'.</p>