ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency 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 Примеры медиа-запросов

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 Поддержка браузерами

CSS3. Уроки для начинающих

CSS Селекторы


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">This paragraph refers to two classes.</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>