CSS да берилган классли тег

Фарз қилайлик, бизда бир хил классларга эга бўлган икки турдаги теглар мавжуд. Мисол учун, h2 сарлавҳалари ҳам, абзацлар ҳам бир хил классга эга бўлсин:

<h2 class="eee">Title</h2>
<p class="eee">
	text
</p>

<h2 class="eee">Title</h2>
<p class="eee">
	text
</p>

Биз, масалан, бундай классга эга бўлган барча элементларни қизил рангга бояшимиз мумкин:

.eee {
	color: red;
}

Аммо, маълум бир тегга класс билан мурожат қилиш мумкин. Мисол учун, барча h2 тегларни eee классли ҳамда барча p тегларни алоҳида шу класс билан танлаш мумкин.

Бунинг учун селекторда тег номини, сўнгра эса класс номини бирга ёзиш керак. Келинг, масалан, бизнинг классга эга бўлган h2 тегларни қизил рангга, шу классга эга бўлган абзацларни эса яшил рангга бояйлик:

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

Қуйидаги код берилган:

<h2 class="header">text</h2>
<h2 class="header">text</h2>
<h3 class="header">text</h3>
<h3 class="header">text</h3>

.header {
	color: red;
}

h2 тегларнинг барчасига header классли бўлганларида 40px ўлчам беринг, h3 тегларнинг эса барчасига шу класс билан 30px ўлчам беринг.