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 contains the given value as a whitespace-separated word. This does not work in IE6 and below.

Since the match is against individual whitespace-separated words, for example, a title of hoge hoge1 would match both hoge and hoge1.

Syntactically you can include a space inside the value by wrapping it in " or ', but since this selector compares against whitespace-separated words, a value containing a space will not match as expected. Be careful with this.

Sample Code

p[title~=hoge] { color: red;} /* Applies to p elements whose title attribute contains 'hoge' as a whitespace-separated word. */
p[title~="hoge1"] { font-size: 20px;} /* Applies to all p elements whose title attribute contains 'hoge1' as a whitespace-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 contains 'hoge' as a whitespace-separated word. */
p[title~="hoge1"] { font-size: 20px;} /* Applies to all p elements whose title attribute contains 'hoge1' as a whitespace-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="hoge hoge1">This is a p element. The title is set to 'hoge hoge1'.</p>
<p title="Hatsune-Miku IA">This is a p element. The title attribute is set to 'Hatsune-Miku IA'.</p>