CSS .class — вибірка за класом
Селектор class обирає елемент, що має вказаний клас.
Загальний опис
автор: NagarD
Синтаксис
.class {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Селектор .intro дивиться лише на клас — тег не важливий: жовтими стають і абзац, і div.
HTML
<p class="intro">Абзац із класом intro — жовтий.</p>
<div class="intro">І div із класом intro — жовтий.</div>
<p>Абзац без класу — без змін.</p>CSS
.intro {
background-color: yellow;
}Селектор p.intro вимагає і тег, і клас разом: div із тим самим класом уже не підходить.
HTML
<p class="intro">p із класом intro — червоний.</p>
<div class="intro">div із тим самим класом — без змін: селектор лише для p.</div>CSS
p.intro {
background-color: red;
}Три класи на елементі, ланцюжок .btn.accent і той самий клас на різних тегах.
HTML
<button class="btn">Звичайна</button>
<button class="btn accent">З акцентом</button>
<a href="#" class="btn">Посилання-кнопка</a>CSS
body { font: 16px system-ui, sans-serif; }
.btn {
display: inline-block;
padding: .5rem 1rem;
margin-right: .5rem;
border: 1px solid #2563eb;
border-radius: 6px;
color: #2563eb;
text-decoration: none;
background: transparent;
}
/* обидва класи одночасно */
.btn.accent {
background: #2563eb;
color: #fff;
}Коментарі
Коментарів ще немає — будьте першим!