Селектор в CSS — это шаблон, который определяет, к каким элементам HTML применяются стили. Он указывает браузеру, какие один или несколько элементов нужно выбрать.
Существуют различные типы селекторов:
Селекторы элементов (Type selectors): Выбирают все экземпляры HTML элемента.
css
Селекторы классов (Class selectors): Выбирают элементы с определенным значением атрибута class.
css
Селекторы ID (ID selectors): Выбирают единственный элемент с определенным значением атрибута id.
css
Универсальный селектор (Universal selector): Выбирает все элементы.
css
Селекторы атрибутов (Attribute selectors): Выбирают элементы на основе наличия или значения их атрибутов.
css
Псевдоклассы (Pseudo-classes): Выбирают элементы на основе их состояния.
css
Псевдоэлементы (Pseudo-elements): Выбирают определенные части элемента или создают "фиктивные" элементы.
css
Комбинаторы (Combinators): Определяют отношения между селекторами.
| Комбинатор | Описание | Пример |
|---|---|---|
Пробел ( ) | Селектор потомков (Descendant selector) | div p |
> | Селектор дочерних элементов (Child selector) | div > p |
+ | Селектор соседних элементов (Adjacent sibling selector) | h1 + p |
~ | Селектор общих соседних элементов (General sibling selector) | h1 ~ p |
Селекторы могут комбинироваться для более точного определения элементов.