НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності

CSS Продвинутий

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Підгонка об'єкту CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

Place for your advertisement!
CSS3. Уроки W3Schools для початківців українською мовою

En

CSS Селектори


CSS-селектор вибирає HTML-елементи, до яких потрібно додати стиль.


CSS Селектори

CSS селектори використовуються для "пошуку" (або вибору) HTML-елементів, які ви хочете стилізувати.

Можна розділити CSS селектори на п’ять категорій:

На цій сторінці пояснюються прості селектори CSS.


CSS селектор елемента

Селектор елементів обирає HTML елементи на основі імені елемента.

Приклад

Тут всі елементи <p> на сторінці будуть вирівняні по центру з червоним кольором тексту:

p {
  text-align: center;
  color: red;
}
Спробуйте самі »

CSS селектор id

Селектор id використовує атрибут id HTML елемента для вибору визначеного елемента.

Ідентифікатор (id) елементу є унікальним на сторінці, тому селектор id використовується для вибору одного унікального елемента!

Щоб обрати елемент з визначеним ідентифікатором, напишіть символ хешу (#), а потім id елемента.

Приклад

Наведене нижче правило CSS буде застосовано до елементу HTML з id="para1":

#para1 {
  text-align: center;
  color: red;
}
Спробуйте самі »

Примітка: Ім’я Id не може починатися з цифри!


CSS селектор class

Селектор class обирає HTML елементи з визначеним атрибутом класу.

Щоб обрати елементи з визначеним класом, введіть символ крапки (.), а потім ім’я класу.

Приклад

В цьому прикладі всі HTML елементи з class="center" будуть червоними та вирівняні по центру:

.center {
  text-align: center;
  color: red;
}
Спробуйте самі »

Ви також можете вказати, що клас має зачіпати лише визначені HTML елементи.

Приклад

В цьому прикладі лише елементи <p> з class="center" будуть вирівняні по центру:

p.center {
  text-align: center;
  color: red;
}
Спробуйте самі »

HTML елементи також можуть посилатись на кілька класів.

Приклад

В цьому прикладі елемент <p> буде стилізовано у відповідності з class="center" та class="large":

<p class="center large">Цей параграф реферер для двох класів.</p>
Спробуйте самі »

Примітка: Ім’я класу не може починатися з цифри!


Універсальний CSS селектор

Універсальний селектор (*) виділяє всі елементи HTML на сторінці.

Приклад

Наведене нижче правило CSS впливає на кожен HTML елемент на сторінці:

* {
  text-align: center;
  color: blue;
}
Спробуйте самі »

CSS Селектор групування

Селектор групування обирає всі HTML елементи з однаковими визначеннями стилю.

Подивіться наступний код CSS (елементи h1, h2 та p мають однакові визначення стилю):

h1 {
  text-align: center;
  color: red;
}

h2 {
 text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Буде краще згрупувати селектори, щоб мінімізувати код.

Щоб згрупувати селектори, розділяйте кожен селектор комою.

Приклад

В цьому прикладі ми згрупували селектори із коду вище: 

h1, h2, p {
  text-align: center;
  color: red;
}
Спробуйте самі »

Перевірте себе за допомогою вправ


Всі прості CSS селектори

Селектор Приклад Опис прикладу
.class .intro Обирає всі елементи з class="intro"
#id #firstname Обирає елемент з id="firstname"
* * Обирає всі елементи на сторінці
element p Обирає всі елементи <p>
element,element,.. div, p Обирає всі елементи <div> та всі елементи <p>

Place for your advertisement!