A megadott osztállyal rendelkező elem kiválasztása CSS-ben

Tegyük fel, hogy kétféle elemünk van ugyanazokkal az osztályokkal. Például, legyenek mind a h2 címsorok, mind a bekezdések ugyanabban az osztályban:

<h2 class="eee">Cím</h2>
<p class="eee">
	szöveg
</p>

<h2 class="eee">Cím</h2>
<p class="eee">
	szöveg
</p>

Például piros színre változtathatjuk az összes ilyen osztállyal rendelkező elemet:

.eee {
	color: red;
}

Azonban címezhetünk egy adott, osztállyal rendelkező elemre is. Például kiválaszthatjuk az összes h2 elemet, amelyek eee osztállyal rendelkeznek, és külön kiválaszthatjuk az összes p elemet ezzel az osztállyal.

Ehhez a szelektorban az elem nevét kell írni, majd közvetlenül utána az osztály nevét. Például színezzük pirosra a h2 elemeinket a mi osztályunkkal, majd a zöldre az ilyen osztállyal rendelkező bekezdéseket:

h2.eee {
	color: red;
}
p.eee {
	color: green;
}

A következő kód adott:

<h2 class="header">szöveg</h2>
<h2 class="header">szöveg</h2>
<h3 class="header">szöveg</h3>
<h3 class="header">szöveg</h3>

.header {
	color: red;
}

Állítsa be az összes h2 elemet header osztállyal 40px méretűre, az összes h3 elemet ezzel az osztállyal pedig 30px méretűre.