Class Selector

Class selector represents an element with the class attribute whose value is a whitespace-separated list of words, one of which is exactly "classname". It's same meaning [class~=value].

Syntax

.classname{ properties }

Example

[style.css]

 .pastoral{
   color: green;
 }
 h1.pastoral{
   font-size: 0.9em;
 }

[index.html]

<body>
  <h1>Not green</h1>
  <h1 class="pastoral">green and small font-size.</h1>
  <p class="pastoral">green, but not change the font-size.</p>
</body>

The CSS Selectors Level 3 specification defines the class selector in 6.4. Class selectors.