Frontend | Вопросы собесов

Какие селекторы знаешь ?

Спросят с вероятностью 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. Ставь 👍 если нравится контент.



🔐 База собесов | 🔐 База тестовых