Abr@X@bra.ru
Псевдокласс Nth-child vs nth-of-type

Псевдокласс Nth-child vs nth-of-type

17.05.2017
13
Селектора nth-child () и nth-of-type () являются «структурными псевдоклассами», которые позволяют нам выбирать элементы на основе информации в дереве документов.

В случае nth-child () и nth-of-type () дополнительная информация является позицией элемента в дереве документа относительно его родителя и братьев и сестер. Хотя эти два псевдокласса очень похожи, они работают по-разному.

Как работает nth-child ()

Псевдокласс nth-child () используется для сопоставления элемента на основе числа, которое представляет позицию элемента среди его братьев и сестер. Более конкретно, это число представляет количество братьев и сестер, которые существуют перед элементом в дереве документов (минус 1).

Это число выражается в виде функции, an + b, где n - индекс, а a и b - любые целые числа, которые мы передаем. Например, чтобы выбрать каждый элемент, мы могли бы написать любое из следующего:
:nth-child(1n+0) { /* styles */ }
:nth-child(n+0) { /* styles */ }
:nth-child(1n) { /* styles */ }
В дополнение к использованию этой функции мы можем передать одно целое число, например. : Nth-child (1) или использовать одно из заданных ключевых слов, четное или нечетное. Эти ключевые слова являются альтернативой для записи функциональной нотации для выбора каждого нечетного или четного элемента.
:nth-child(odd) { /* styles for odd elements */ }
:nth-child(2n+1) { /* styles for odd elements */ }

:nth-child(even) { /* styles for even elements */ }
:nth-child(2n+0) { /* styles for even elements */ }
При использовании: nth-child () самостоятельно, достаточно просто предсказать, какой элемент будет выбран. Например, используя эту разметку -
<div class="example">  
    <p>This is a <em>paragraph</em>.</p>
    <p>This is a <em>paragraph</em>.</p>
    <p>This is a <em>paragraph</em>.</p>
    <div>This is a <em>divider</em>.</div>
    <div>This is a <em>divider</em>.</div> <!-- Element to select -->
    <p>This is a <em>paragraph</em>.</p>
    <p>This is a <em>paragraph</em>.</p>
    <div>This is a <em>divider</em>.</div>
    <p>This is a <em>paragraph</em>.</p>
    <div>This is a <em>divider</em>.</div>
</div> 
Если бы мы хотели выбрать пятый элемент div, мы могли бы просто написать следующее:
.example :nth-child(5) { background: #ffdb3a; }



Однако неожиданные результаты могут возникать, когда существует несколько типов элементов, и нам необходимо объединить псевдокласс класса nth-child () с селекторами типа или класса. Например, чтобы снова выбрать тот же самый элемент div, у нас может возникнуть соблазн написать следующее:
.example div:nth-child(2) { background: #ffdb3a; }
Данный код, будет работать неправильно, потому что элемент, на который нацелен селектор, фактически не существует. Используя вышеописанный селектор, код будет выполнять следующие шаги:
  • Выделите все дочерние элементы .example.
  • Найдите второй элемент в этом списке, независимо от типа
  • Проверьте, является ли этот элемент типом div
Так как второй элемент в дереве документа - это абзац, а не div, ничего не выбрано. Если бы мы хотели выбрать второй элемент div, нам пришлось бы использовать псевдокласс класса nth-of-type ().

Как работает nth-of-type ()

Псевдокласс nth-of-type (), как и nth-child (), используется для сопоставления элемента на основе числа. Это число, однако, представляет положение элемента внутри только тех его братьев и сестер, которые имеют один и тот же тип элемента.

Это число также может быть выражено как функция или с использованием ключевых слов четное или нечетное. Используя вышеприведенную разметку примера, мы можем выбрать все нечетные параграфы, написав -
.example p:nth-of-type(odd) { background: #ffdb3a; }




Когда мы используем этот селектор, код проходит следующие шаги:
  • Выделите все дочерние элементы .example, которые имеют тип p
  • Создать новый список только этих элементов
  • Выберите нечетные числа из этого списка
Из-за этого мы можем теперь выбрать второй div, пятый дочерний элемент .example -
.example div:nth-of-type(2) { /* styles */ }

Другие «nth» псевдоклассы

Помимо nth-child () и nth-of-type (), существует ряд других структурных псевдоклассов, которые мы можем использовать для выбора элементов на основе их положения внутри их родных братьев и сестер. Подобно nth-child () и nth-of-type (), они делятся на две группы - те, которые не зависят от типа, такие как nth-child () и те, которые зависят от типа, nth-of-type().

Не зависят от типа:

  • nth-child()
  • nth-last-child()
  • first-child()
  • last-child()
  • only-child()

Зависят от типа:

  • nth-of-type()
  • nth-last-of-type()
  • first-of-type()
  • last-of-type()
  • only-of-type()

Подсчет с конца - nth-last-child () и nth-last-of-type ()

Эти псевдоклассы работают как nth-child () и nth-of-type (), но начинают отсчитывать от последнего элемента в группе, а не от первого.
.example :nth-last-child(1) { background: #a6cae7; } 
.example p:nth-last-of-type(1) { background: #ffdb3a; }

Первый элемент - first-child () и first-of-type ()

Псевдо-классы first-child () и first-of-type () выбирают первый элемент. Их можно рассматривать как использование псевдо-классов nth-child () и nth-of-type (), но просто передавая значение 1.
.example :first-child() { /* styles */ }
.example :nth-child(1) { /* styles */ } /* same as above */

.example :first-of-type() { /* styles */ }
.example :nth-of-type(1) { /* styles */ } /* same as above */

Последний элемент - last-child () и last-of-type ()

Они противоположны псевдоклассам first-child () и first-of-type (). Их можно рассматривать как использование псевдо-классов nth-last-child () и nth-last-of-type (), но передавая значение 1.
.example :last-child() { /* styles */ }
.example :nth-last-child(1) { /* styles */ } /* same as above */

.example :last-of-type() { /* styles */ }
.example :nth-last-of-type(1) { /* styles */ } /* same as above */

Единственный элемент - only-child () и только-of-type ()

Наконец, эти псевдоклассы будут выбирать элемент, который является единственным дочерним. Для only-child () элемент должен быть буквально единственным дочерним элементом родителя, независимо от типа. Для only-of-type () элемент должен быть единственным дочерним элементом своего типа.
.example :only-child() { /* styles */ }
.example p:only-of-type() { /* styles */ }



Сделай свой бизнес лучше

Сайты на 1С-Битрикс

Сделать заказ
CSS, SASS
Читайте также:
5-минутный путеводитель для не-дизайнера

5-минутный путеводитель для не-дизайнера

Это руководство даст вам базовые знания практических советов по дизайну, которые вы можете применить сегодня.
Читать
Flexbox и как делать адаптивные сайты

Flexbox и как делать адаптивные сайты

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющи...
Читать
Chrome, функции о которых вы не знали.

Chrome, функции о которых вы не знали.

Мы часто воспринимаем адресную строку браузера исключительно как место, куда мы вводим URL страницы, на которую мы хотим...
Читать