CSS при первом знакомстве выглядит не таким уж и сложным. Но что с этим всем делать чтобы было и красиво и правильно не понятно — особенно когда речь заходит о css селекторах. Сразу и не поймешь что выбрать — селектор класса CSS или селектор по ID? Когда использовать селекторы тегов CSS, а когда комбинированные? И как разобраться в специфичности и приоритете?
В этом руководстве постарался разложить всё по полочкам: что такое селекторы CSS, какие бывают их виды, как они работают и как не запутаться в применении стилей. И как всегда - на примерах.
Что такое селекторы CSS
Селекторы CSS — это основа любой стилизации в веб-разработке. Они позволяют выбрать нужные HTML-элементы на странице и применить к ним стили: задать цвет, шрифт, отступы и многое другое.
Проще говоря, селектор — это указатель на то, к какому элементу должны применяться CSS-правила. Например:
h1 {
color: blue;
}
Здесь h1 — это селектор тегов CSS, который выбирает все заголовки первого уровня.
CSS селекторы размещают в CSS-файлах или внутри тегов <style> в HTML-документе. Есть три основных способа:
- Внешний файл styles.css (лучший способ), делаем ссылку на этот файл прямо в html документе:
<link rel="stylesheet" href="styles.css">
Селекторы пишутся в styles.css.
2. Внутри HTML-файла, в теге <head>:
<style>
p { color: blue; }
</style>
Если стилей немного, можем прописать их прямо в нашем документе перед основным контентом. Но если дизайн сложный, так лучше не делать, а выносить стили во внешний файл.
3. В атрибуте style (не рекомендуется):
<p style="color: blue;">Текст</p>
Исчезающая практика. Сгодится, если файл небольшой и надо украсить всего пару элементов. Какой-нибудь счёт на оплату или заглушка 404 на самописный сайт, к примеру.
Обычно селекторы размещают во внешнем CSS-файле — так чище и удобнее для масштабирования.
Зачем знать про селекторы CSS
Если вы дизайнер, то вопрос не уместный. Но если бэкэндер, то для общего развития есть необходимый минимум. Давайте разберемся чо дейсвительно надо понимать.
Во-перевых. Без понимания css селекторов невозможно правильно стилизовать страницу. Ошибки в выборе селектора могут привести к тому, что стили:
- не будут применяться вовсе;
- применятся ко всем элементам подряд;
- приведут к конфликтам и хаосу в оформлении.
Во-вторых. Знание свойств селекторов CSS, их приоритета и специфичности позволяет:
- точно управлять стилями;
- упрощать поддержку кода;
- создавать масштабируемые и чистые стили.
В работе в коммерческих проектах знание данной темы просто обязательно.
Далее коснемся основных понятий, связанных с селекторами. В основном, для того, чтобы понимать в каких направлениях можно развиваться далее, чтобы более глубоко изучить тему.
Селектор и HTML-тег: базовый уровень
Один из самых простых — это селектор HTML CSS, или селектор по тегу. Пример:
p {
color: red;
}
Здесь p — селектор элементов CSS, который выбирает все абзацы <p>. Это фундаментальный способ применения стилей на старте. В принципе, этим можно было бы и обойтись, если документ не большой.
Если проект более-менее сложный, понадобятся более продвинутые инструменты. О них далее.
CSS селекторы: примеры и виды
Разберём основные типы селекторов стилей CSS с примерами:
1. Селектор класса CSS
.menu {
font-weight: bold;
}
Выбирает все элементы с классом menu. Один из самых часто используемых типов.
А вот так элемент будет выглядеть в коде документа: <div class="menu">Пункт меню</div>
Видим имя класса в теге. к нему и применится стиль.
2. CSS селектор по ID
#header {
background: #f0f0f0;
}
Применяется к элементу с уникальным ID. Обратите внимание: ID должен быть уникален на странице.
И снова в коде: <div id="header">Это шапка сайта</div>
3. Комбинированные селекторы
div.menu p {
color: green;
}
Покрасит зеленым текст абзаца <p> внутри блока <div> с классом menu. Полезны для более точного выбора.
Подробнее в коде:
<body>
<div class="menu">
<p>Этот текст будет зелёным</p>
</div>
<div class="menu">
<span>А это — не затронется, потому что это не <p></span>
</div>
<p>Этот абзац вне .menu — тоже не изменится</p>
</body>
4. CSS селектор по атрибуту
input[type="text"] {
border: 1px solid #ccc;
}
Селектор input[type="text"] применяет стиль только к текстовым полям ввода (<input type="text">). Он задаёт им серую рамку толщиной 1 пиксель. Поля других типов (например, password) не затронутся.
Вот на этот код будет воздействовать селектор (только первый элемент, потому что второй имеет тип password)
<body>
<input type="text" placeholder="Введите текст">
<input type="password" placeholder="Пароль">
</body>
5. Псевдоклассы и псевдоэлементы
a:hover {
text-decoration: underline;
}
p::first-letter {
font-size: 200%;
}
Позволяют стилизовать элемент в определённом состоянии или отдельную его часть. hover - это когда мышкой наводим на элемент. Подумайте, что значит text-decoration: underline; и что же там подчеркивается при наведении?
6. Универсальный селектор CSS
* {
box-sizing: border-box;
}
Выбирает все элементы на странице. Используется, например, для сброса стилей.
Специфичность и приоритет селекторов CSS
Когда несколько правил применяются к одному элементу, вступает в силу приоритет селекторов CSS. Порядок специфичности:
- Селектор по ID
- Селектор по классу, атрибуту, псевдоклассу
- Селектор по тегу
- Универсальный селектор
Понимание специфичности важно, чтобы стили применялись так, как вы ожидаете. Как видим, по ID самый приоритетный. А универсальный наименее. Значит мы можем, например всю страницу покрасить в один цвет при помощи универсального селектора, а потом через ID или даже теги красить отдельные элементы.
CSS селекторы: следующий элемент и выбор
Дополнительные возможности дают селекторы следующего элемента CSS. Это больше похоже на хак, но работает вполне штатно. Пример:
h2 + p {
margin-top: 0;
}
Этот CSS-селектор следующий выбирает только тот абзац, который непосредственно следует за заголовком <h2>.
Почему важно уметь выбирать селекторы
Понимание и умелое использование css селекторов даёт нам:
- Полнейший контроль над внешним видом сайта;
- Гибкость в применении стилей;
- Чистый, понятный и поддерживаемый код, это важно для коммерческой разработки;
- Возможность избежать конфликтов и переопределений. (Запомните приоритеты селекторов).
Селекторы — это язык общения между HTML и стилями. Понимая, какая часть кода называется селектор CSS, и как он работает — вы делаете первый шаг к профессиональному веб-дизайну.
Заключение
CSS селекторы — это несложно, если подойти к изучению структурно. Используйте css классы, селекторы, идентификаторы, комбинируйте их, соблюдайте приоритет и создавайте аккуратные и логичные стили.
А если вы только начинаете, просто поэкспериментируйте с примерами — и со временем выбор нужного css-селектора - хоть по тегу, хоть по классу станет интуитивным.
Если статья была полезна — поставьте пожалуйста ей лайк! Тогда статью увидит больше читателей, а мне будет приятнее готовить для вас ещё больше полезных материалов.
Не нашли чего-то в статье? Пишите в комменты чего не хватает, и я добавлю!