First of type css: :first-of-type — CSS: Cascading Style Sheets

Различия между :nth-child и :nth-of-type / Хабр

<section>
   <p>Little</p>
   <p>Piggy</p>    <!— Нужен этот элемент —>
</section>

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

Хотя, конечно, в этих селекторах, есть разница.

Псевдокласс :nth-child, означачает выбрать элемент, если:

1. Этот элемент — параграф;
2. Это второй элемент одного родителя.

1. Выбрать второй параграф одного родителя.

<section>
   <h2>Words</h2>
   <p>Little</p>
   <p>Piggy</p>    <!— Нужен этот элемент —>
</section>

p:nth-child(2) { color: red; } /* Не работает */

p:nth-of-type(2) { color: red; } /* Продолжает работать */

Если добавить <h3> после <h2>, то селектор с :nth-child не выберет ничего, потому что параграф больше не является вторым элементом. Селектор с :nth-of-type продолжит работать.

Мне кажется :nth-of-type менее хрупкий и более полезный в целом, несмотря на это

Большинство ситуаций, когда я говорю «Почему мой селектор с :nth-child не работает?» случаются из за того, что я забываю про выборку тегов и нужный тег не оказывается по счету тем, который нужен. Поэтому, при использовании :nth-child лучше указывать его от родителя и не использовать привязку к тегу.

dl :nth-child(2) {  } /* Этот вариант лучше чем */
dd:nth-child(2) {  } /* этот */

Поддержка браузерами :nth-of-type

Использование селекторов first-of-type, first-child и nth-of-type

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

Если постараться сократить использование идентификаторов, классов и встроенного в 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

Что такое CSS: Псевдо-класс первого типа

Иногда вы сталкиваетесь со сценарием, когда вы хотите настроить таргетинг на определенный тип элемента в группе из братьев и сестер , и вот где первый тип псевдокласс помогает вам, потому что он нацелен на первый элемент указанного типа и группу из братьев и сестер .

Допустим, у нас есть контейнер из div ; внутри контейнера есть много элементов p, некоторые из которых являются элементами h2. Но вам особенно нужно настроить таргетинг на первый элемент h2 в родственной группе. Вы можете быстро решить этот сценарий с помощью CSS first типа 9.0003 псевдокласс .

На приведенном выше рисунке показано, что внутри нашего контейнера у нас есть несколько элементов h2 и p, и с помощью первого в своем роде псевдокласса мы нацелились на первый элемент h2 из родственной группы и изменили цвет до синего.

Синтаксис CSS

Базовый синтаксис для псевдокласса первого типа CSS следующий:

 
 :first-of-type {
  css объявления;
}
 

 
 <Селектор тегов>:first-of-type {
  css объявления;
}
 

 
 <дел>
   
Основной заголовок
 
   
Второй заголовок
 
  
Абзац
  
Абзац