Псевдоклассы
Структуры
В прошлом совете я рассказал, что такое и как работают псевдоклассы в ЦСС, а также о нескольких псевдоклассах из категории взаимодействия.
Псевдоклассы
Структуры
Сегодня расскажу о псевдоклассах структуры. Они стилизуют элемент на основе его положения в структуре страницы.
:first‑child, :last‑child — первый и последний элементы внутри контейнера. Применят свои стили, если в родительском контейнере до или после элемента нет других тегов.
<style>
.container p:first-child {
color: red;
}
.container p:last-child {
color: blue;
}
</style>
<div class="container">
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
</div>The Visual Display of Quantitative Information
Envisioning Information
Visual Explanations
Beautiful Evidence
:nth‑child, :nth‑last‑child — энный элемент, если считать с начала или конца контейнера. Второй, третий, десятый с конца и так далее.
<style>
.container p:nth-child(2) {
color: red;
}
.container p:nth-last-child(2) {
color: blue;
}
</style>
<div class="container">
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
</div>The Visual Display of Quantitative Information
Envisioning Information
Visual Explanations
Beautiful Evidence
Я вечно путал odd и even, помогла простая мнемоника: в нечётном odd нечётное количество букв, а в чётном even — чётное
Вместо конкретного числа можно использовать ключевые слова odd и even, чтобы стилизовать нечётные и чётные элементы:
Я вечно путал odd и even, помогла простая мнемоника: в нечётном odd нечётное количество букв, а в чётном even — чётное
<style>
.container p:nth-child(odd) {
color: red;
}
.container p:nth-child(even) {
color: blue;
}
</style>
<div class="container">
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
</div>The Visual Display of Quantitative Information
Envisioning Information
Visual Explanations
Beautiful Evidence
Ещё можно использовать формулы, чтобы стилизовать последовательность из определённых порядковых номеров тегов, вроде «3, 8, 13, 18».
:first‑of‑type, :last‑of‑type — первый и последний элемент по типу тега элемента в контейнере. Например, первый и последние абзацы, несмотря на заголовок и ссылку внизу:
<style>
.container p:first-of-type {
color: purple;
}
.container p:last-of-type {
color: green;
}
</style>
<div class="container">
<h1>Edward R. Tufte</h1>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
<a href="…">More books</a>
</div>Edward R. Tufte
The Visual Display of Quantitative Information
Envisioning Information
Visual Explanations
Beautiful Evidence
:nth‑of‑type, :nth‑last‑of‑type — то же самое, что и :nth-child, но по типу тега.
:only‑child, :only‑of‑type — стилизует элемент или тип тега, если он единственный в контейнере. Эти псевдоклассы не особо полезны при ручной вёрстке, но могут пригодиться, когда вёрстка генерируется языками программирования на основе каких‑то данных. В этом случае может быть полезно автоматически оформлять одинокие элементы.
Все псевдоклассы выше действуют на элементы внутри контейнера. Если убрать из селекторов указатель на контейнер (.container), то стилизуются все первые, последние, энные и так далее абзацы внутри всех элементов на страницы.
Строгие размеры в пикселях в примере только для удобства демонстрации, в реальной вёрстке такого лучше избегать
:empty — стилизует тег, если он пустой. Внутри не должно быть никаких символов, даже пробелов и переносов строк. Как и псевдоклассы :only-child и :only-of-type, редко используется в ручной вёрстке.
Строгие размеры в пикселях в примере только для удобства демонстрации, в реальной вёрстке такого лучше избегать
<style>
.box {
height: 50px;
width: 50px;
background-color: red;
}
.box:empty {
background-color: blue;
}
</style>
<div class="box">:^)</div>
<div class="box"> </div>
<div class="box">
<b>!!!</b>
</div>
<div class="box"></div>:root — стилизует корневой элемент разметки. В случае с ХТМЛ, это обычно тег html, в иксэмэль‑документах и в других форматах разметки может быть что‑то другое.
Как и любые селекторы ЦСС, можно комбинировать псевдоклассы между собой и с другими селекторами:
p:first-child:hover { … }
.table-row:nth-type(odd) { … }
ul.noIndent li:nth-type(odd):hover { … }Только не переусердствуйте со сложностью, если получается огромный селектор, то скорее всего лучше решить проблему как‑то проще. Например, введением дополнительного класса :‑)
В следующем советах расскажу о следующей категории псевдоклассов.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.