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, when split by hyphens, starts with the given word. This does not work in IE6 and below.

This is a bit tricky — it matches the first word before a hyphen (-). For example, hoge-hoge1 would match hoge. A value like hoge1-hoge2 hoge3 would match hoge1 — it takes the first segment before the first hyphen.

Sample Code

p[title|=hoge] { color: red;} /* Applies to p elements whose title attribute starts with 'hoge' as the first hyphen-separated word. */
p[title|=hoge1] { color: blue;} /* Applies to all p elements whose title attribute starts with 'hoge1' as the first hyphen-separated word. */
[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 starts with 'hoge' as the first hyphen-separated word. */
p[title|=hoge1] { color: blue;} /* Applies to all p elements whose title attribute starts with 'hoge1' as the first hyphen-separated word. */
[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="hoge1-hoge2 hoge3">This is a p element. The title is set to 'hoge1-hoge2 hoge3'.</p>
<p title="Hatsune-Miku-IA">This is a p element. The title attribute is set to 'Hatsune-Miku-IA'.</p>