Чтобы стилизовать элементы, нужно сначала определить и выбрать их с помощью CSS-селекторов. Вы можете выбирать элементы по их id, классу, типу, атрибутам, значениям атрибутов и другим признакам.
Понять, когда использовать тот или иной тип селектора — одна из самых сложных задач в CSS. Преимущества изучения и тестирования различных CSS-селекторов включают уменьшение количества кода и ускорение загрузки страницы. Если вы новичок в веб-дизайне, мы рекомендуем начать с введения в HTML перед изучением CSS.
CSS универсальный селектор
Универсальный селектор обозначается звёздочкой * и служит основой для других селекторов. Он выбирает все элементы, независимо от их типа. Например, если задать правило, которое устанавливает красный фон:
* {
background-color: red;
}
Это правило применится ко всем элементам на странице.
Универсальный селектор часто используется в комбинации с другими, позволяя выбрать все элементы внутри определённого элемента.
CSS селектор по типу элемента
Селекторы по типу выбирают элементы по их названию. Чтобы использовать этот селектор, укажите имя элемента без дополнительного CSS-синтаксиса. Например, чтобы выровнять весь текст в заголовках <h1> по левому краю и задать чёрный цвет:
h1 {
text-align: left;
color: black;
}
Этот стиль будет применяться только к <h1> и не повлияет на другие заголовки или текст.
CSS селектор по классу
Селекторы по классу выбирают элементы, которым в HTML задан определённый класс. Такой селектор начинается с точки (.). Например, селектор для всех элементов с классом center будет выглядеть так: .center.
Селектор по классу — самый часто используемый тип селекторов, потому что он гибкий: вы можете назначать один и тот же класс разным элементам или несколько классов одному элементу.
Комбинируя селекторы по типу и по классу, можно выбрать элементы определённого типа с конкретным классом. Например, чтобы выбрать все заголовки <h1> с классом center, используйте селектор: h1.center.
CSS селектор по id
Селектор по id использует значение атрибута id, чтобы выбрать конкретный элемент на странице. Как вы, возможно, помните из курса HTML, id не должен повторяться на одной странице. Чтобы выбрать элемент по id, укажите символ # перед значением, например: #header.
Иногда разработчики добавляют в селектор ещё и тег элемента, чтобы удобнее визуально ориентироваться в CSS. Например, если у контейнера <div> задан id=»header», можно использовать селектор: div#header.
Совет! Селекторы по id редко применяются в CSS, но играют важную роль в JavaScript.
CSS селектор-комбинатор
Селекторы-комбинаторы описывают взаимосвязь между элементом, который вы хотите стилизовать, и одним из других элементов — будь то дочерние, родительские, предки, потомки или соседи.
Символ селектора потомков — это пробел ( ), например, div h1. Этот селектор выбирает все элементы <h1>, вложенные в элементы <div>. Другие комбинаторы: селектор дочернего элемента (>), селектор смежного соседа (+) и селектор общего соседа (~).
CSS селектор псевдокласса
Псевдоклассы позволяют выбирать элементы, которые иначе выбрать невозможно. Псевдокласс указывается после селектора и разделяется двоеточием (:). Большинство таких селекторов можно условно разделить на 2 группы:
- Динамические селекторы псевдоклассов, такие как a:hover. Они позволяют стилизовать элементы, с которыми взаимодействует пользователь. Например, селектор :hover позволяет изменить стиль ссылок при наведении.
- Структурные селекторы псевдоклассов, такие как p:first-child. Этот тип селекторов позволяет более точно указывать элементы. Например, :first-child и :last-child позволяют выбирать соответственно первый и последний элемент из группы соседних элементов.
CSS селектор псевдоэлемента
Псевдоэлементы CSS позволяют стилизовать элементы или их части без добавления id или классов.
Если вы хотите стилизовать первую букву каждого абзаца, чтобы она выглядела как в книге — есть селектор, который позволяет это сделать. Селектор p::first-letter применяет выбранный стиль ко всем первым буквам абзацев. Другие популярные псевдоэлементы — ::before и ::after, чтобы добавить декоративное содержимое до или после элемента.
Чтобы узнать больше о псевдоэлементах, ознакомьтесь с их полным списком на MDN Web Docs.
CSS селектор по атрибуту
Селекторы по атрибуту встречаются нечасто, но у них есть полезные варианты использования. Они позволяют выбирать элементы с определённым атрибутом или значением атрибута.
Селекторы по атрибуту заключаются в квадратные скобки ([…]). Например, чтобы стилизовать все элементы с атрибутом title, используйте селектор [title]. Можно также выбирать элементы с конкретным значением title. В этом случае код будет выглядеть так: [title=»Important»].
Использование селекторов по типу элемента CSS
Селектор по типу элемента выбирает элементы соответствующего типа — например, теги <p>, <span> и <div>. Обычно считается плохой практикой применять точечные изменения только с помощью селектора по типу. Такие элементы, как <div>, достаточно универсальны и содержат разные типы контента, которые вы, скорее всего, захотите стилизовать по-разному.
Один из типичных случаев использования селекторов по типу — это тело страницы, так как на любой странице может быть только один тег <body>. Вы можете использовать его для установки параметров по умолчанию для всей страницы. Например:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
Использование селекторов по классу
Селекторы по классу — это то, что вы будете использовать чаще всего при создании таблиц стилей. Селекторы по классу обозначаются точкой (.). Этот селектор применяет стили ко всем элементам с указанным атрибутом class. Это отличный способ управлять тем, как CSS-правила применяются к элементам, — вы создаёте атрибут, который можно назначить любому элементу, чтобы задать ему определённый стиль.
Использование селекторов по id
Селектор по id позволяет применять стили к элементу с указанным идентификатором. Он обозначается решёткой (#) перед значением id.
Хотя использовать id для точечного выбора элементов может показаться удобным, со временем такая таблица стилей может превратиться в кошмар для сопровождения. Поэтому этот тип селектора используется реже, чем селекторы по классу.