Что такое селектор в CSS?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

Селектор в CSS — это шаблон, который определяет, к каким элементам HTML применяются стили. Он указывает браузеру, какие один или несколько элементов нужно выбрать.

Существуют различные типы селекторов:

Селекторы элементов (Type selectors): Выбирают все экземпляры HTML элемента.
```
p { /* Выбирает все параграфы */
  color: blue;
}
```
Селекторы классов (Class selectors): Выбирают элементы с определенным значением атрибута class.
```
.highlight { /* Выбирает все элементы с классом "highlight" */
  background-color: yellow;
}
```
Селекторы ID (ID selectors): Выбирают единственный элемент с определенным значением атрибута id.
```
#header { /* Выбирает элемент с id "header" */
  font-size: 2em;
}
```
Универсальный селектор (Universal selector): Выбирает все элементы.
```
* { /* Выбирает все элементы на странице */
  margin: 0;
  padding: 0;
}
```
Селекторы атрибутов (Attribute selectors): Выбирают элементы на основе наличия или значения их атрибутов.
```
[type="text"] { /* Выбирает все input с type="text" */
  border: 1px solid gray;
}
```
Псевдоклассы (Pseudo-classes): Выбирают элементы на основе их состояния.
```
a:hover { /* Выбирает ссылку при наведении */
  text-decoration: underline;
}
```
Псевдоэлементы (Pseudo-elements): Выбирают определенные части элемента или создают "фиктивные" элементы.
```
p::first-line { /* Выбирает первую строку параграфа */
  font-weight: bold;
}
```

Комбинаторы (Combinators): Определяют отношения между селекторами.

Комбинатор	Описание	Пример
Пробел ( )	Селектор потомков (Descendant selector)	`div p`
`>`	Селектор дочерних элементов (Child selector)	`div > p`
`+`	Селектор соседних элементов (Adjacent sibling selector)	`h1 + p`
`~`	Селектор общих соседних элементов (General sibling selector)	`h1 ~ p`

Селекторы могут комбинироваться для более точного определения элементов.