Выборка элементов (селекторы)
Селекторы — выражения, которые выбирают 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/
Поддержать автора