Тег із заданим класом у CSS

Навчимося вибирати не всі елементи певного класу, а лише конкретний HTML-тег із цим класом.

Один і той самий клас можна призначити різним HTML-елементам. Наприклад, клас може одночасно використовуватися для заголовків і абзаців.

Нехай заголовки h2 та абзаци p мають однаковий клас eee:

<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 {
  color: red;
}

p.eee {
  color: green;
}

❗ Важливо:

Селектор h2.eee вибирає лише елементи <h2> з класом eee. Інші елементи з таким самим класом він не зачіпає.

Практичне завдання

📌 Завдання:

№1
Дано HTML-код:
<h2 class="header">text</h2> <h2 class="header">text</h2> <h3 class="header">text</h3> <h3 class="header">text</h3>
Та CSS:
.header { color: red; }
Зробіть усі h2 з класом header розміром 40px, а всі h3 з цим класом — розміром 30px.

💡 Показати підказку

Використайте селектори h2.header і h3.header.

✅ Показати відповідь

.header {
  color: red;
}

h2.header {
  font-size: 40px;
}

h3.header {
  font-size: 30px;
}