Im folgenden Beispiel wird mit h3.hinterlegt eine Klasse namens hinterlegt angesprochen, die aber nur für HTML-Elemente vom Typ h3 gilt: also z.B. auf HTML-Elemente wie <h3 class=„hinterlegt“> anwendbar ist.

Mit *.hinterlegt wird gezeigt, dass man den gleichen Klassennamen nochmal allgemein oder für andere Elemente verwenden kann. Der Stern gilt als Universalselektor und bedeutet so viel wie „für alle Elemente“. Er kann auch ganz entfallen. Im Beispiel .hinterlegt kann man das sehen. Ein h3-Element erhält im Beispiel also die Formatierungen, die mit dem Selektor h3.hinterlegt bestimmt werden. Ein p-Element mit <p class=„hinterlegt“> erhält dagegen die Formatierungen, die mit .hinterlegt bestimmt werden.

Es können auch mehrere Klassenselektoren hintereinander verwendet werden.

h3.hinterlegt  {background-color:red }
*.hinterlegt   {background-color:yellow}
.hinterlegt    {background-color:yellow}
.groesser      {font-size:24pt; }
.unterstrichen {text-decoration:underline;}
...
<h3 class="hinterlegt">Diese Überschrift erscheint rot</h3>
<p class="hinterlegt">Diese Zeile ist gelb hinterlegt.</p>
<p class="groesser">Diese Zeile ist größer geschrieben.</p>
<p class="unterstrichen">Diese Zeile ist unterstrichen.</p>
<p class="hinterlegt groesser unterstrichen">Diese Zeile ist gelb hinterlegt,
             größer und unterstrichen geschrieben.</p>

Die beiden HTML-Elemente <div> und <span> haben besondere Bedeutung für Stylesheets. Der Grund ist, dass sie selber eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt, während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt. Unter Verwendung von div oder span ist es also Möglich, beliebigen Textabschnitten Klassenstyles zuzuweisen.

<div class="chap">Eine Kapitelüberschrift</div>
<div class="sect">Eine Sektionsüberschrift</div>