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 exactly matches the given value. This does not work in IE6 and below.

When writing the value, if it contains no spaces you can write it directly, like div[title=hoge].

If the value contains spaces, you must wrap it in " or ', like div[title="hoge hoge1"].

Sample Code

p[id=hoge] { color: red;} /* Applies to p elements that have an id attribute with an exact value of 'hoge'. */
p[title=hoge1] { color: blue;} /* Applies to all p elements that have a title attribute with an exact value of 'hoge1'. */
[class="hoge2 "] { color: orange;} /* Applies to elements whose class attribute exactly matches 'hoge2 ' (including the trailing space). */
[title=Hatsune-Miku] { color: green;} /* Non-ASCII characters work here too. */

Browser Preview

p[id=hoge] { color: red;} /* Applies to p elements that have an id attribute with an exact value of 'hoge'. */
p[title=hoge1] { color: blue;} /* Applies to all p elements that have a title attribute with an exact value of 'hoge1'. */
[class="hoge2 "] { color: orange;} /* Applies to elements whose class attribute exactly matches 'hoge2 ' (including the trailing space). */
[title=Hatsune-Miku] { color: green;} /* Non-ASCII characters work here too. */

<p id="hoge">This is a p element. The id is set to 'hoge'.</p>
<p title="hoge1">This is a p element. The title attribute is set to 'hoge1'.</p>
<p title="hoge1 ">This is a p element. The title attribute is set to 'hoge1 ' (with a trailing space), so it does not turn blue.</p>
<p class="hoge2 ">This is a p element. The class is set to 'hoge2 ' (with a trailing space).</p>
<p class="hoge2 hoge3">This is a p element. The class is set to 'hoge2 hoge3'.</p>
<p title="Hatsune-Miku">This is a p element. The title attribute is set to 'Hatsune-Miku'.</p>