Всё о селекторах в CSS: от основ до высшего пилотажа

Гайд, который поможет разобраться с видами селекторов и научиться правильно выбирать элементы.

Веб-разработчику, который занимается вёрсткой, необходимо знать CSS-селекторы. И если с простыми селекторами (по классу или id) всё понятно, то с комбинированием разных селекторов, псевдоклассами и псевдоэлементами иногда возникают проблемы даже у опытных программистов.

Поэтому давайте обо всём по порядку.

Что такое селекторы CSS

Селекторы — инструкции, которые позволяют выбирать определённые HTML-элементы и применять к ним стили. Селектор можно использовать, чтобы выбрать сразу все заголовки на странице и изменить их цвет или шрифт.

Например, такое правило CSS будет применяться ко всем элементам с классом «example» и устанавливать им красный цвет текста:

			.example {
  color: red;
}

Почему селекторы важны для создания красивых интерфейсов

✔ С их помощью можно задавать стили для всех элементов на странице, включая текст, изображения, кнопки, ссылки, таблицы, формы и т. д. Без селекторов CSS веб-страница будет выглядеть просто и невзрачно.

✔ Селекторы позволяют задавать стили для разных состояний элементов, таких как «активное», «наведение», «фокус», «выделение» и т. д. Это даёт возможность создавать интерактивные и привлекательные для пользователя элементы и делать интерфейс интуитивно понятным.

✔ Благодаря селекторам CSS можно создавать каскадные стили, наследовать свойства от родительских элементов и применять их к дочерним. Это упрощает процесс стилизации и уменьшает объём кода.

Базовые селекторы CSS

Это основные селекторы, которые используют для выбора элементов на веб-странице. Они определяют, какой элемент будет стилизоваться на странице и какой стиль будет применён к этому элементу.

Вспомним про базовые селекторы, чтобы потом перейти к продвинутым вариантам.

Селекторы по тегу

Это самый простой способ выбрать все элементы на странице с определённым тегом.

			h1 {
  color: red;
}

Этот код устанавливает красный цвет для всех элементов h1 на странице.

Селекторы по классу

Классовый селектор позволяет выбрать все элементы, у которых есть определённый класс. Классы можно использовать для группировки элементов схожих типов.

			.header {
  font-size: 24px;
  font-weight: bold;
}

Этот код устанавливает размер шрифта 24 пикселя и жирное начертание для всех элементов на странице с классом «header».

Селекторы по ID

Такой селектор позволяет выбрать элемент с определённым ID. Важно: идентификаторы должны быть уникальными на странице.

			#main {
  width: 800px;
  margin: 0 auto;
}

Этот код устанавливает ширину 800 пикселей и центрирует элемент с ID «main» на странице.

Селекторы атрибутов

Такие селекторы позволяют выбрать элементы на основе значения атрибута.

			[data-role] {
  color: blue;
}

Этот код устанавливает синий цвет для всех элементов на странице с атрибутом «data-role».

Комбинированные селекторы

Базовые селекторы можно комбинировать между собой, чтобы выбрать элементы на основе нескольких условий.

Например, комбинированный селектор может выбрать все элементы с классом «header», которые находятся внутри элемента с ID «main»:

			#main .header {
  font-size: 18px;
}

Этот код устанавливает размер шрифта 18 пикселей для всех элементов с классом «header», которые находятся внутри элемента с ID «main».

Продвинутые селекторы в CSS

Продвинутые селекторы в CSS — это способ выбора элементов на странице с использованием более сложных правил, чем простые селекторы. Они позволяют определять элементы на основе их отношения к другим элементам, состояниям, атрибутам и т. д.

Далее — несколько примеров продвинутых селекторов.

Псевдоклассы

Это ключевые слова в CSS, которые позволяют применять стили к элементам в зависимости от их состояния или положения на странице. Псевдоклассы указывают после селектора элемента и отделяют от него двоеточием.

Некоторые из наиболее часто используемых псевдоклассов:

:hover — позволяет применять стили при наведении курсора на элемент.

			a:hover {
  color: red;
  text-decoration: underline;
}

:active — позволяет применять стили, когда элемент находится в активном состоянии (при нажатии на кнопку или ссылку).

			button:active {
  background-color: blue;
  color: white;
}

:focus — позволяет применять стили, когда элемент в фокусе (например, при нажатии на input).

			input:focus {
  border: 2px solid red;
}

Псевдоэлементы

Это специальные ключевые слова в CSS, которые позволяют добавлять дополнительный контент на страницу или стилизовать определённые части элементов.

Псевдоэлементы указывают с помощью двух двоеточий (::) после селектора элемента.

Вот некоторые из наиболее часто используемых псевдоэлементов:

::before — позволяет добавить контент перед содержимым элемента.

			p::before {
  content: "Текст до элемента: ";
  font-weight: bold;
}

::after — позволяет добавить контент после содержимого элемента.

			p::after {
  content: " Текст после элемента";
  font-style: italic;
}

::first-line — позволяет стилизовать первую строку текста внутри элемента.

			p::first-line {
  font-weight: bold;
  text-transform: uppercase;
}

Селекторы потомков

Такие селекторы позволяют выбирать элементы, которые являются потомками других элементов. Например, следующий код выберет все элементы, которые являются потомками :

			div a {
  color: blue;
}

Селекторы соседей

Селекторы соседей позволяют выбирать элементы, которые идут непосредственно после других элементов того же уровня.

Этот код выберет все элементы, которые идут непосредственно после элементов:

			h2 + p {
  font-size: 1.2em;
}

Как использовать селекторы в разных контекстах

Селекторы в CSS нужны для выбора элементов, к которым должны быть применены стили. Их можно использовать в разных контекстах, таких как медиа-запросы, CSS-анимации с помощью @keyframes и препроцессоры, например Sass.

Селекторы внутри медиа-запросов

С помощью медиа-запросов создают страницы, адаптированные под разные устройства и экраны. Селекторы, используемые внутри медиа-запросов, позволяют задавать стили для элементов страницы в зависимости от размеров экрана, ориентации, разрешения и других параметров устройства.

Для использования селекторов внутри медиа-запросов в CSS нужно определить медиа-запрос с помощью ключевого слова @media и задать условия, при которых будет применяться данный медиа-запрос. Затем внутри блока медиа-запроса можно использовать селекторы и задавать стили для соответствующих элементов страницы.

Вот несколько примеров кода:

			/* Стили для экранов шириной 768px и выше */
@media screen and (min-width: 768px) {
  /* Селектор элемента */
  h1 {
    font-size: 36px;
  }
  /* Селектор класса */
  .container {
    max-width: 960px;
  }
  /* Селектор потомка */
  ul li {
    font-size: 18px;
  }
}
/* Стили для экранов шириной меньше 768px */
@media screen and (max-width: 767px) {
  /* Селектор элемента */
  h1 {
    font-size: 24px;
  }
  /* Селектор класса */
  .container {
    max-width: 480px;
  }
  /* Селектор потомка */
  ul li {
    font-size: 14px;
  }
}

В этом примере мы определили два медиа-запроса, которые будут применяться к элементам на экранах разных размеров. В каждом медиа-запросе мы использовали различные селекторы CSS для определения стилей, которые будут применяться к элементам на каждом экране.

Селекторы c @keyframes

@keyframes позволяет создавать плавную и красивую анимацию на странице, чтобы сайт выглядел дружелюбным и интерактивным.

Для использования селекторов CSS с @keyframes нужно сначала определить ключевые кадры (keyframes) анимации с помощью правила @keyframes. Это правило определяет набор стилей для каждого момента времени в анимации.

Вот пример:

			/* Определяем анимацию с помощью @keyframes */
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Применяем анимацию к элементу */
div {
  animation-name: rotate; /* имя анимации */
  animation-duration: 2s; /* продолжительность анимации */
  animation-timing-function: linear; /* функция времени для плавности */
  animation-iteration-count: infinite; /* количество повторений анимации */
}

Здесь мы определили анимацию «rotate», которая использует селекторы 0% и 100% для определения начального и конечного состояний элемента в процессе анимации. Затем применили эту анимацию к элементу «div», используя свойства «animation-name», «animation-duration», «animation-timing-function» и «animation-iteration-count».

Таким образом, использование селекторов CSS с @keyframes позволяет создавать красивые и динамичные анимации на странице.

Селекторы в Sass

Sass (Syntactically Awesome Style Sheets) — язык препроцессора CSS, который предоставляет мощные инструменты для создания более гибких и удобных стилей. Одна из таких возможностей — использование селекторов в Sass.

Селекторы в Sass позволяют обращаться к элементам и группам элементов на странице и изменять их стили. Пример шаблонного селектора %flex-element-center для центрирования элементов по вертикали и горизонтали с использованием свойств flexbox:

			// объявляем шаблонный селектор
%flex-element-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
// применяем шаблонный селектор к элементу
.my-element {
  @extend %flex-element-center;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

В Sass можно использовать различные типы селекторов, такие как классы, идентификаторы, псевдоклассы, псевдоэлементы и другие. Также можно использовать операторы комбинирования селекторов, такие как «потомок», «родитель», «брат» и т. д.

Шаблонные селекторы в Sass уменьшают количество повторяющегося кода и позволяют сделать CSS более модульным и поддерживаемым.

Селекторы и производительность

Хотя селекторы очень мощные и гибкие, некоторые из них могут значительно влиять на производительность.

Выборка элементов на странице с помощью сложных селекторов может быть затратной по времени и замедлять загрузку страницы. Чем сложнее селектор, тем больше времени нужно браузеру, чтобы его обработать, и тем дольше будет загружаться страница.

Как использовать селекторы в больших проектах

На крупных проектах использование селекторов может стать проблемой для производительности и обслуживаемости кода.

Хорошей идеей будет использовать:

простые селекторы, когда это возможно
классы для стилизации элементов — стили для группы элементов сделают код более читаемым
псевдоэлементы для создания эффектов, таких как добавление стрелок, рамок и т. д.

Что нужно избегать (по возможности):

селекторы наследования — они могут ухудшить производительность, поскольку браузеры должны рассчитать правила стилизации для каждого элемента на странице
селекторы по ID — они создают сильную специфичность, которая затруднит изменение стилей в будущем
слишком сложные селекторы — читать их труднее, а конфликты стилей могут возникать чаще.

Ещё немного про именование классов и идентификаторов

Именование классов и идентификаторов для селекторов CSS может оказать значительное влияние на удобство работы с кодом, его читаемость и поддержку в будущем.

Вот несколько полезных советов:

Используйте описательные имена. Имена классов и идентификаторов должны быть понятными, им необходимо описывать функциональность элемента или его содержимое. Например, вместо «box» лучше использовать «content-box» или «sidebar» вместо «div1».
Используйте нижний_регистр_и_подчёркивания. Имя класса или идентификатора не должно содержать пробелов или знаков пунктуации.
Избегайте слишком общих имён. Имена, такие как «header», «content» или «footer», могут быть переиспользованы в разных частях страницы. Используйте более конкретные имена, чтобы избежать конфликтов.
Применяйте аббревиатуры с умом — там, где это действительно имеет смысл и они широко известны.
Имена классов и идентификаторов не могут начинаться с чисел или знака подчёркивания.
Старайтесь быть последовательными. При выборе имён для классов и идентификаторов лучше придерживаться одной системы именования. Если вы используете подчёркивание для разделения слов в одном месте, используйте его и в других местах.

Заключение

Селекторы в CSS позволяют управлять внешним видом элементов на веб-странице, делая их более эстетичными и функциональными. Надеемся, что эта статья помогла вам повторить базу и научиться пользоваться продвинутыми селекторами.