Выборка элементов (селекторы)

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

/* задать цвет ссылкам */
a {
  color: #337ab7;
}

/* задать размер абзацам */
p {
  font-size: 16px;
}

На примере выше используются два селектора, которые оформляют ссылки и абзацы.

Также можно выбирать элементы по классам и атрибуту «id».

.one {}     /* выборка всех элементов с классом one */
.one.two {} /* выборка всех элементов с двумя классами: one и two */
#id {}      /* выборка элемента по атрибуту id */

#id p {} /* выбрать абзацы внутри элемента #id */

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

/* ❌ не рекомендуется, большая вложенность */
.page .item .title a {}

/* ✅ можно сократить */
.page .item a {}

Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента .item.

Об этом также написано в официальной документации разработчиков браузера Firefox (на английском): developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirect=no#How_the_Style_System_Matches_Rules

Если селектор будет некорректно задан (например две точки вместо одной), то этот селектор просто проигнорируется.

Несколько селекторов

Есть возможность указывать CSS сразу нескольким элементам. Данный способ называется «список селекторов» (или «лист селекторов»).

/* указать CSS для абзацев и ссылок */
p, a {}

/* указать CSS для элементов с классами "product-title" и "product-link" */
.product-title, .product-link {}

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

/* 1-ый вариант (в одну строку) */
.product-title, .product-link {
  color: #333;
}

/* 2-ой вариант (с новой строчки) */
.product-title,
.product-link {
  color: #333;
}

Если в списке селекторов будет ошибка, то CSS-код не выполнится для всех селекторов в текущем списке.

/* css ниже не выполнится для всех указанных элементов,
   т.к. в одном из селекторов ошибка (две точки) */
.product-title, ..product-link {
  
}

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

Универсальный селектор (символ «*») позволяет выбрать все элементы, за исключением псевдоэлементов (такие как ::after или ::before).

* {}   /* выборка абсолютно всех элементов (не рекомендуется) */

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

/* рекомендуется указывать box-sizing ко всем элементам */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Игра для обучения выборки элементов

Браузерная игра CSS Dinner для развития, где надо выбирать предметы через CSS: https://flukeout.github.io/