Существует множество типов селекторов, каждый из которых предназначен для выбора элементов на странице по определённому признаку. Вот основные виды:

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

• `*` — выбирает все элементы на странице.

Селекторы типов (тегов)

• `tagName` — выбирает все элементы данного типа (например, `div`, `p`).

Селекторы классов

• `.className` — выбирает все элементы с указанным классом.

Селекторы идентификаторов

• `#idName` — выбирает элемент с указанным идентификатором.

Селекторы атрибутов

• `[attribute]` — выбирает все элементы с указанным атрибутом.
• `[attribute="value"]` — выбирает все элементы с указанным атрибутом и значением.
• `[attribute^="value"]` — выбирает все элементы, значение атрибута которых начинается с указанной строки.
• `[attribute$="value"]` — выбирает все элементы, значение атрибута которых заканчивается указанной строкой.
• `[attribute*="value"]` — выбирает все элементы, значение атрибута которых содержит указанную строку.

Селекторы потомков и дочерних элементов

• `parent > child` — выбирает все дочерние элементы `child`, непосредственно находящиеся внутри `parent`.
• `ancestor descendant` — выбирает все элементы `descendant`, находящиеся внутри `ancestor` (включая вложенные).

Селекторы соседей и братьев

• `prev + next` — выбирает элемент `next`, непосредственно следующий за `prev`.
• `prev ~ siblings` — выбирает всех соседей `siblings`, которые следуют за `prev` на том же уровне вложенности.

Псевдоклассы

• `:hover` — выбирает элемент при наведении курсора мыши.
•  `:focus` — выбирает элемент, когда он находится в фокусе.
• `:nth-child(n)` — выбирает n-ый дочерний элемент.
• `:first-child` и `:last-child` — выбирают первый и последний дочерние элементы соответственно.
• `:not(selector)` — выбирает элементы, которые не соответствуют указанному селектору.

Псевдоэлементы

• `::before` и `::after` — позволяют вставлять содержимое до или после содержимого элемента.
• `::first-letter` и `::first-line` — выбирают первую букву или первую строку текста элемента.

Эти селекторы можно комбинировать для создания более сложных правил выбора элементов. Овладение различными типами селекторов позволяет гибко управлять стилизацией веб-страниц.

Feb. 26, 2024, easyoffer