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

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

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

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

Различия классов и id в том, что одинаковое значение классов можно присвоить нескольким элементам, а значение id можно присвоить только одному элементу (т.е. не могут быть несколько элементов с одинаковым id).

Классы и ИД чувствительны к регистру, т.е. класс .header-h2 и .header-H2 это два разных класса.

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

/* не рекомендуется, большая вложенность */
.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

Рекомендуется делать выборку по классам вместо id, т.к. селекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.

#modal a {
    color: blue;
}

/* цвет ниже не получится переопределить,
   т.к. #modal имеет больший вес, чем у классов */
.modal-header a {
    color: #333;
}

/* в этом случае придётся добавить #modal */
#modal .modal-header a {
    color: #333;
}

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

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

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

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

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

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

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

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