Как настроить таргетинг на часть веб-страницы с помощью селекторов CSS
Каскадные таблицы стилей (CSS) позволяют изменять внешний вид ваших веб-страниц. От шрифтов и цветов до интервалов и общего макета – все инструменты дизайна у вас под рукой. Хотя CSS в целом является сложным языком, для начала вам нужно понять только две основные концепции.
Все начинается с определения, какую именно часть страницы вы хотите стилизовать.
CSS = Селекторы + Объявления
Файл CSS содержит ряд правил, описывающих, как должен быть отформатирован файл HTML. Каждое правило состоит из двух частей: что стилизовать и как стилизовать. Первая часть управляется с помощью серии терминов, известных как «селекторы».
Примеры в этой статье включают объявления стилей, но они не в центре внимания: сами селекторы.
Исторически существовало три уровня (или версии) селектора CSS с разной степенью поддержки браузером. В 2020 году, согласно Can I Use , все они будут доступны более чем 99 процентам пользователей по всему миру.
Селекторы уровня 1
Уровень 1 представил четыре основных типа селекторов, которые охватывают огромное количество случаев даже сегодня.
| Шаблон | совпадения |
|---|---|
E | все элементы E |
.c | все элементы с class = "c" |
#myid | элемент с id = "myid" |
EF | элемент F внутри элемента E |
| Псевдоклассы | |
E:link | гиперссылка на страницу, которую ранее не посещали |
E:visited | гиперссылка на страницу, которая уже была посещена |
E:active | гиперссылка, которая выбрана в данный момент |
| Псевдоэлементы | |
E::first-line | первая отформатированная строка элемента E |
E::first-letter | первая форматированная буква элемента E |
Выбор типа
Самым простым селектором является «селектор типа». Он нацелен на все экземпляры элемента, такие как абзац или полужирный текст:
p { margin-bottom: 0; }
b { font-family: sans-serif; }Селектор классов
Атрибут class позволяет добавлять к элементу HTML дополнительную семантику, например абзац определенного типа. Такие элементы можно выбрать в CSS следующим образом:
.intro { font-weight: bold; }Этот селектор будет соответствовать:
<p class="intro">…</p>Но обратите внимание, что это также будет соответствовать:
<ul class="intro">…</ul>Если вы хотите, чтобы это применялось только к вводным абзацам, вы можете комбинировать селектор типа и селектор класса:
p.intro { font-weight: bold; }Селектор ID
Атрибут HTML id должен быть уникальным в документе, например, если у вас есть:
<div id="contents">…</div>Это должен быть единственный элемент с идентификатором «содержимого». Селектор идентификатора позволяет вам выбрать этот конкретный элемент в документе:
#contents { color: #333; }Селектор потомков
Строго говоря, «комбинатор», потому что этот селектор – это пространство между двумя другими. HTML является иерархическим, как объясняется в нашем обзоре DOM . Селектор потомков позволяет идентифицировать элемент по его контексту внутри другого элемента:
table b { font-weight: normal; }Псевдоклассы и элементы
Псевдоселекторы нацелены на классы или элементы, которые явно не существуют, но в любом случае доступны. Думайте о них как о специальных бонусах к контенту:
p::first-line { text-transform: uppercase; }Списки селекторов
Используйте запятую, чтобы объединить селекторы в список, если вы хотите применить к каждому один и тот же набор правил. Вместо того:
th { padding: 1em; }
td { padding: 1em; }Ты можешь написать:
th, td { padding: 1em; }Специфика
Таблица стилей – это серия правил, в которых для сопоставления элемента используется селектор, но что происходит, когда одному элементу соответствует несколько правил? Результирующее поведение регулируется «специфичностью», которая определяет, какое правило используется в таких случаях, как:
p.intro { color: black; }
p { color: gray; }В таких случаях приоритетное правило определяется его спецификой, а именно:
- Селекторы ID (`# contents`) являются наиболее специфичными.
- Селекторы классов (`.author`) менее специфичны.
- Селекторы типа (`p`) наименее специфичны.
При вычислении специфичности каждый уровень учитывается только в том случае, если два селектора имеют одинаковую оценку на более высоком уровне, поэтому «#contents» более конкретен, чем «article.news p.author.special», потому что первый «выигрывает» у селекторов ID.
Селекторы уровня 2
Следующая версия селекторов CSS представила селекторы атрибутов, расширила псевдоклассы и псевдоэлементы и добавила два новых комбинатора.
| Шаблон | совпадения |
|---|---|
* | любой элемент |
E > F | дочерний элемент F элемента E |
E + F | элемент F, которому непосредственно предшествует элемент E |
| Селекторы атрибутов | |
E[foo] | элемент E с атрибутом "foo" |
E[foo="bar"] | элемент E, атрибут "foo" которого в точности соответствует "bar" |
E[foo~="bar"] | элемент E, атрибут "foo" которого представляет собой список значений, разделенных пробелами, одним из которых является "bar" |
E[foo|="en"] | элемент E, атрибут "foo" которого содержит разделенный дефисом список значений, начинающийся с "en" |
| Псевдоклассы | |
E:first-child | элемент E, первый дочерний элемент своего родителя |
E:lang(fr) | элемент типа E на языке "fr" |
| Псевдоэлементы | |
E::before | сгенерированное содержимое перед содержимым элемента E |
E::after | сгенерированное содержимое после содержимого элемента E |
Универсальный селектор
«*» Соответствует любому элементу. Это не всегда так полезно, но если вы хотите, например, сбросить какие-либо поля по умолчанию, вы можете сделать это:
* { margin: 0; }Селекторы атрибутов
Селекторы атрибутов позволяют очень точно настраивать стили, фильтруя их по атрибуту элемента:
a[title] { text-decoration: underline dotted; }Дочерний комбинатор: элемент непосредственно внутри другого
Подобен комбинатору потомков, но соответствует только непосредственным потомкам, а не потомкам ниже по дереву. Например, «ul> li» здесь будет соответствовать только тексту «Раздел 1», а не «Разделу 1.1»:
<ul>
<li>
Section 1
<ul>
<li>Section 1.1</li>
<li>Section 1.2</li>
</ul>
<li>
</ul>
Комбинатор смежных братьев и сестер: следующий брат
h1 + p { font-weight: bold; }Этот селектор, который часто используется для управления полями или вводным абзацем без определенного класса, соответствует одному элементу, только если он следует непосредственно за другим. В этом примере будет сопоставлен только первый абзац, а не второй:
<h1>Contents</h1>
some extra text
<p>Introductory paragraph</p>
<p>Following paragraph</p>
Обратите внимание, что этот селектор учитывает только элементы, а не текст, когда решает, кто будет следующим родственником.
Наследование
Некоторые свойства CSS наследуют свое значение от элемента-предка. На практике это означает, например, что установка начертания шрифта элемента «body» означает, что каждый абзац, таблица и т. Д. Также использует тот же начертание шрифта.
Конечно, это именно то, что вы ожидаете, но рассмотрим свойство, которое не наследуется: например, «маржа». Вы бы не хотели, чтобы у каждого отдельного абзаца или полужирного текста было такое же поле, как у всего документа.
Хорошее практическое правило состоит в том, чтобы нацеливать элементы настолько широко, насколько это имеет смысл – не выбирайте каждый отдельный элемент, если подойдет простой селектор «body».
Селекторы уровня 3
На этом уровне было добавлено гораздо больше псевдоклассов, а также некоторые селекторы атрибутов и новый комбинатор.
| Шаблон | совпадения |
|---|---|
E ~ F | элемент F, которому предшествует элемент E |
| Селекторы атрибутов | |
E[foo^="bar"] | элемент E, атрибут "foo" которого начинается со строки "bar" |
E[foo$="bar"] | элемент E, атрибут "foo" которого заканчивается строкой "bar" |
E[foo*="bar"] | элемент E, атрибут "foo" которого содержит подстроку "bar" |
| Псевдоклассы | |
E:root | элемент E, корень документа |
E:nth-child(n) | элемент E, n-й дочерний элемент своего родителя |
E:nth-last-child(n) | элемент E, n-й дочерний элемент своего родителя, считая от последнего |
E:nth-of-type(n) | элемент E, n-й брат своего типа |
E:nth-last-of-type(n) | элемент E, n-й брат своего типа, считая от последнего |
E:last-child | элемент E, последний дочерний элемент своего родителя |
E:first-of-type | элемент E, первый брат его типа |
E:last-of-type | элемент E, последний родственник этого типа |
E:only-child | элемент E, единственный дочерний элемент своего родителя |
E:only-of-type | элемент E, единственный родственник своего типа |
E:empty | элемент E, у которого нет дочерних элементов (включая текстовые узлы) |
E:target | элемент E, являющийся целью ссылающегося URI |
E:enabled | элемент пользовательского интерфейса E, который включен |
E:disabled | элемент пользовательского интерфейса E, который отключен |
E:checked | проверенный элемент пользовательского интерфейса E |
E:not(s) | элемент E, который не соответствует простому селектору s |
Селекторы атрибутов
Вы можете выбрать элементы с атрибутом, который начинается с заданного значения: a[href^="https:"] , заканчивается заданным значением: img[src$=".gif"] или содержит значение: a[*="value"] .
Псевдоклассы
Дополнительные псевдоклассы включают «: last-child», «: empty» (для соответствия элементу без содержимого) и «: checked», который соответствует элементу, подобному вводу флажка, но только когда он установлен.
Общий комбинатор братьев и сестер: следующий брат
Подобно комбинатору смежных братьев и сестер из уровня 2, он соответствует любому брату, который идет после другого, а не только следующему:
h1 ~ p { font-size: 110%; }Селекторы CSS и как их использовать
Теперь вы знаете практически все, что нужно знать о том, как выбрать часть веб-страницы с помощью CSS. Теперь вы готовы стилизовать свои страницы с большим разнообразием свойств CSS, охватывающих все, от цветов до макета.
Кредит изображения: Панкай Патель / Unsplash