Спросят с вероятностью 10%
Существует множество типов селекторов, каждый из которых предназначен для выбора элементов на странице по определённому признаку. Вот основные виды:
Универсальный селектор
- — выбирает все элементы на странице.
Селекторы типов (тегов)
-
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 — выбирают первую букву или первую строку текста элемента.Эти селекторы можно комбинировать для создания более сложных правил выбора элементов. Овладение различными типами селекторов позволяет гибко управлять стилизацией веб-страниц.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых