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.className

[CSS Selector] E.className

'.className' applies styles to elements that have the specified class name.

Additionally, by writing class names consecutively like '.className.className', you can apply styles only to elements that have all of those class names. For example, specifying '.hoge.hoge1' applies styles to elements that have both class name 'hoge' and class name 'hoge1'. Note that when using this syntax, the class names must be written consecutively without any spaces between them.

Sample Code

.hoge { color: red;} /* Applies to elements with class name 'hoge'. */
p.hoge1 { color: blue;} /* Applies to p elements with class name 'hoge1'. */

Browser Preview

.hoge { color: red;} /* Applies to elements with class name 'hoge'. */
p.hoge1 { color: blue;} /* Applies to p elements with class name 'hoge1'. */
.hoge2.hoge3 { color: orange;} /* Applies to elements with both class names 'hoge2' and 'hoge3'. */

<div class="hoge">This is a div element with class name 'hoge'.</div>
<div class="hoge1">This is a div element with class name 'hoge1'.</div>
<div>This is a div element.</div>
<p class="hoge">This is a p element with class name 'hoge'.</p>
<p class="hoge1">This is a p element with class name 'hoge1'.</p>
<p class="hoge1">This is a p element with class name 'hoge1'.</p>
<p class="hoge2">This is a p element with class name 'hoge2'.</p>
<p class="hoge2 hoge3">This is a p element with class names 'hoge2' and 'hoge3'.</p>
<p>This is a p element.</p>