Какие виды CSS-селекторов существуют и для чего они используются?

Некоторые виды CSS-селекторов:

• Элементные селекторы. ru.hexlet.io Применяют стили или скрипты ко всем элементам выбранного типа на странице. ru.hexlet.io Например, div применит заданные стили ко всем элементам <div> в документе. ru.hexlet.io Это основной и самый простой тип селектора. ru.hexlet.io
• Классовые селекторы. ru.hexlet.io Используют точку перед именем класса и позволяют выбрать группу элементов, которым назначен определённый класс. ru.hexlet.io Например, .menu позволяет выбрать каждый элемент, который содержит класс menu. ru.hexlet.io Классовые селекторы более гибкие, так как один и тот же класс может быть присвоен элементам разных типов. ru.hexlet.io
• Идентификаторы. ru.hexlet.io Начинаются с символа # и предназначены для стилизации конкретного элемента, уникального на странице. ru.hexlet.io Например, #header применит стили только к элементу с идентификатором header. ru.hexlet.io
• Сложные селекторы. ru.hexlet.io Включают комбинаторы, такие как потомок ( ), непосредственный потомок (>), соседние элементы (+) и общие следующие соседи (~). ru.hexlet.io Эти селекторы позволяют более точно выбирать элементы относительно других элементов в HTML-структуре. ru.hexlet.io
• Псевдо-классы. ru.wikibooks.org Предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками (:link, :visited, :hover, :active, :focus). ru.wikibooks.org
• Псевдо-элементы. ru.wikibooks.org Определяют стиль элементов, чётко не определённых в структуре документа (:first-letter, :first-line), а также позволяют генерировать и стилизовать несуществующее содержимое (:before, :after и свойство content). ru.wikibooks.org
• Селекторы атрибутов. ru.wikibooks.org Позволяют стилизовать элемент не только по значению тега, но и по значению атрибута (a[attr]). ru.wikibooks.org

Основное назначение селекторов — идентификация элементов для выбора конкретного элемента и дальнейшей работы с ним. ru.hexlet.io С помощью селекторов можно задать стили для отдельных элементов и групп элементов, за счёт чего определяется внешний вид страницы. ru.hexlet.io