Ола! Если вы новичок в мире веб-разработки, то вам легко забыть обо всех вариациях селекторов атрибутов CSS и просто создать определенный класс или ID для стиля конкретного элемента на вашей странице.
В качестве примера? Предположим, у вас есть flex-контейнер, содержащий 10 flex-элементов, который выглядит следующим образом:
<div class="flex-container-column">
<div class="item">flex item 1</div>
<div class="item">flex item 2</div>
<div class="item">flex item 3</div>
<div class="item">flex item 4</div>
<div class="item">flex item 5</div>
<div class="item">flex item 6</div>
<div class="item">flex item 7</div>
<div class="item">flex item 8</div>
<div class="item">flex item 9</div>
<div class="item">flex item 10</div>
</div>
Вы хотите, чтобы первый гибкий элемент имел другой цвет фона. Вы, вероятно, думаете о создании ID для этого, поскольку этот стиль уникален только для данного элемента, верно?
А что если у нас есть один и тот же flex-контейнер с 10 flex-элементами на каждой странице нашего сайта? И мы хотим, чтобы первый элемент имел тот же стиль? Ну, просто добавьте к нему другой класс, да!
Технически это можно сделать, но это не лучшая практика! Мы должны использовать селекторы атрибутов CSS, а точнее :pseudo-classes.
CSS :pseudo-classes помогает выделить элемент HTML по его определенному состоянию, например:
С помощью фиктивного HTML-кода выше мы можем составить несколько сценариев с использованием background-color:
Давайте начнем сверху вниз. Есть два отображения: колонка и строка.
Колонка
Я хочу, чтобы поля в нечетных позициях (поля номер 1, 3, 5, 7 и 9) были оранжеватого цвета, поэтому я нацеливаю их с помощью следующего :pseudo-класса, указывая в скобке, что я хочу нацелиться на ODD номера.
.item:nth-child(odd) {
background-color: #FEC8A7;
}
То же самое с полями с четными номерами, я просто заменил слово odd внутри скобки на (even).
.item:nth-child(even) {
background-color: #FCECA5;
}
Ряд
На моем дисплее Row я хотел нацелиться только на первое и последнее поле. Поэтому здесь в дело вступают :first-child и last-child:
/* targets the first flex item */
.item2:first-child {
background-color: #A16AE8;
}
/* targets the last flex item */
.item2:last-child {
background-color: #4120A9;
}
Забавный факт, альтернативно вы можете заменить :first-child на :first-of-type или :nth-child(1), а :last-child можно заменить на :last-of-type в этом случае, и они все равно дадут тот же результат! Разница в том, что :first-of-type будет искать ТОЛЬКО первое вхождение указанного элемента в контейнер/родительский элемент, даже если он не является первым дочерним элементом контейнера/родительского элемента. Итак, если я немного изменю код для отображения строки выше, добавив h1 следующим образом:
<div class="flex-container-row">
<h1>header</h1>
<div class="item2">flex item 1</div>
<div class="item2">flex item 2</div>
<div class="item2">flex item 3</div>
<div class="item2">flex item 4</div>
<div class="item2">flex item 5</div>
<div class="item2">flex item 6</div>
<div class="item2">flex item 7</div>
<div class="item2">flex item 8</div>
<div class="item2">flex item 9</div>
<div class="item2">flex item 10</div>
<div class="item2">flex item 10</div>
<div class="item2">flex item 10</div>
</div>
Использование :first-child или :nth-child(1) не будет работать! Потому что первым дочерним элементом контейнера является h1. Но он все равно будет работать с :first-of-type, потому что будет искать первое вхождение класса .item2 в контейнере. Другими словами, :first-child и :nth-child более специфичны в данном случае и рекомендуются к использованию на практике, если вы хотите нацелиться на действительно конкретную позицию элемента.