Mit dem class-Selector kann man gezielt Elemente auswählen, und so verschiedenen Elementen die gleichen Attribute zuweisen. Klassen werden im Stylesheet mit einem führenden Punkt notiert. Bei Notation von verschiedenen Angaben in einem Typ-Selektor und einem class-Selektor ist der class-Selektor höherwertiger als der Typ-Selektor, und überschreibt dessen Angaben.
<style type="txt/css">
.red { color: red;}
.red.italic { font-style: italic; }
</style>
<p class="red">Dieser Textblock ist rot</p>
<p class="red italic">Dieser Text hat beide Klassen, und ist daher rot und kursiv"</p>
<ul class="red">
<li>Diese Liste ist</li>
<li>auch rot</li>
</ul>
so sieht es aus
Dieser Textblock ist rot
Dieser Text hat beide Klassen, und ist daher rot und kursiv"
5+ | 5+ | 4 | 6+ | 1+ | 0.8+ | 1+ | 3.5+ | 2 | |
.classname | J | J | J | J | J | J | J | J | J |