Довольно распространено создание особо внешнего вида для элемента, появляющегося впервые: выделение курсивом первого абзаца на странице, или, например, использование эффекта первой строки вступления. Обычно это задается с помощью применения идентификатора к нужному элементу. Но в этом подходе есть существенные недостатки: каждый раз при создании нового первого абзаца нужно не забыть применить идентификатор для достижения эффекта. Намного проще задать правило, которое будет срабатывать в подходящей ситуации, не зависимо от действий разработчика. 

Если постараться сократить использование идентификаторов, классов и встроенного в HTML кода CSS, так как это зачастую неэффективно, то остаются два решения для создания особого внешнего вида у элементов, появляющихся впервые.

Псевдокласс first-child

Псевдокласс first-child (первенец) задает свойства первому элементу в данном случае. Например, чтобы выбрать первый элемент в теге body, если это абзац, можно использовать следующий код CSS:

body p:first-child {
        font-weight: 800;
}

Вероятно, будет понятней, если прочитать этот селектор задом наперед: если первый элемент внутри тега body – это абзац, то делаем его шрифт жирным.

Хотя таким образом можно обратиться к первому абзацу, только если до него нет других элементов: если перед абзацем есть заголовок, то этот абзац уже не первый элемент в теге body и такой селектор его не выберет.

Псевдоклассы first-of-type и nth-of-type

Хотя такой подход встречается реже, лучшим и наиболее гибким решением будет использование псевдокласса first-of-type (первый этого типа) или nth-of-type (энный этого типа). Здесь все очень просто, эти псевдоклассы делают именно то, что можно ожидать, судя по их названию: обращаются к первому или энному элементу в данном случае. Таким образом, чтобы выбрать первый абзац на странице, как в примере выше, воспользуемся таким кодом CSS:

p:first-of-type {
        font-style: italic;
}

Или таким:

p:nth-of-type(1) {
        font-style: italic;
}

Число в круглых скобках в конце селектора указывает, какой элемент будет выбран: 1 означает первый подходящий элемент, 2 — второй и так далее. Также возможно поместить в круглые скобки формулу.

Использование псевдокласса first-of-type или nth-of-type в ситуации выше позволяет любому количеству элементов или содержимого находится перед абзацем и все равно будет выбран первый абзац. Конечно, можно задавать еще более точные условия и объединять эти псевдоклассы с другими:

article p:first-of-type:first-line {
        font-feature-settings:"smcp";
}

С помощью подходящих приставок производителей для свойства настроек особенностей шрифта объявление выше выберет первую строку первого абзаца на любой странице и отобразит ее в настоящих малых заглавных или капители.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование селектора only-of-type
• Использование элементов блоков
• Использование множественных фоновых изображений в CSS3