Смарт ТВ 

Css предпоследний элемент списка. Псевдоклассы CSS: nth-child и nth-of-type. Синтаксис и правила использования псевдоклассов

Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчёт ведётся не от первого элемента, а от последнего.

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#
×

Значения

odd Все нечётные номера элементов, начиная с конца. even Все чётные номера элементов, начиная с конца. <число> Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке. <выражение> Задаётся в виде an±b , где a и b целые числа, а n - счётчик, который автоматически принимает значение 0, 1, 2...

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы. Отсчёт ведётся от последнего элемента.

Табл. 1. Результат для различных значений псевдокласса
Значение Номера элементов Описание
1 1 Последний элемент, является синонимом псевдокласса :last-child .
5 5 Пятый элемент с конца.
2n 2, 4, 6, 8, 10,… Все чётные элементы, начиная с конца; аналог значения even .
2n+1 1, 3, 5, 7, 9,… Все нечётные элементы, начиная с конца; аналог значения odd .
3n 3, 6, 9, 12,… Каждый третий элемент, начиная с конца.
3n+2 2, 5, 8, 11, 14,… Каждый третий элемент, начиная с предпоследнего.
n+4 4, 5, 6, 7, 8,… Все элементы, кроме последних трёх.
-n+3 3, 2, 1 Последние три элемента.
5n-2 3, 8, 13, 18, 23,… —
even 2, 4, 6, 8, 10,… Все чётные элементы, начиная с конца.
odd 1, 3, 5, 7, 9,… Все нечётные элементы, начиная с конца.

Пример

nth-last-child

21342135 213621372138
Нефть1634 627457
Золото469 725647
Дерево773 793486
Камни2334 8853103

В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).

Рис. 1. Применение псевдокласса:nth-last-child к колонкам таблицы

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) - первая черновая версия стандарта.
×

CSS nth-child — это псевдокласс, используемый для выбора элементов с помощью числового выражения. Его синтаксис на первый взгляд может показаться немного запутанным.

В этой статье мы рассмотрим:

  • различные способы использования :nth-child ;
  • более гибкий селектор :nth-of-type ;
  • и связанные с ними селекторы :nth-last-child и :nth-last-of-type .

:nth-last-of-type

:nth-last-of-type выбирает дочерние элементы, если их позиция в документе совпадает с шаблоном, описываемым алгебраическим выражением.

Селектор :nth-last-of-type выглядит примерно так:

li:nth-child(выражение); {}

«Выражение » может быть представлено ключевыми словами even или odd , целым числом или формулой по типу an+b , где a и b — целые числа, положительные или отрицательные.

Поскольку псевдокласс CSS nth child может использоваться для выбора диапазона различных элементов. Давайте рассмотрим несколько примеров, чтобы стало понятнее.

У меня есть маркированный список из 12 элементов. Посмотрим, как можно использовать :nth-child для выбора определенного элемента или набора элементов по шаблону:

  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum

Чтобы выбрать третий элемент списка, нужно указать li:nth-child(3) . Чтобы выбрать все четные элементы, можно использовать ключевое слово even. И наоборот, можно использовать :nth-child(odd) , чтобы выбрать все элементы с нечетным номером.

CSS nth child каждый 3 й — указываем li:nth-child(3n) . Чтобы выбрать первые четыре элемента, используем li:nth-child(-n+4) . Чтобы выбрать все, кроме первых четырех элементов, можно использовать li:nth-child(n+5) .

Выражение an + b

Альтернативой использованию ключевого слова odd является использование выражения 2n+1 . Но как это работает?

Когда выражение в формате an+b содержит отличные от ноля значения a и b , дочерние элементы разбиваются на группы. Если это выражение 2n+1 , дочерние элементы разбиваются на группы по два. Каждому элементу в группе присваивается индекс, начиная с 1 . Соответствующий элемент в каждой группе — это индекс номер b . В нашем примере это будет первый элемент.

Если выражение 3n+2 , элементы группируются по три элемента, и второй элемент в каждой группе соответствует выражению.

Если значение b является отрицательным, соответствующим в группе является элемент с индексом b . Но отсчитывается он в обратном направлении от индекса 1 . В этом случае соответствующий элемент будет принадлежать не данной, а предшествующей группе.

Ключевое слово even в CSS nth child может быть выражено как 2n . В этом случае у нас нет значения b , поэтому выбирается каждый элемент группы с индексом a ; 2n выбирает каждый второй элемент, 3n — каждый третий, 4n — каждый четвертый и так далее.

Лично я считаю, что концепция разбивки дочерних элементов на группы и поиска индекса соответствия для каждой группы очень запутана. Хотя именно так их описывает спецификация CSS-селекторов .

Мне больше нравится концепция поиска каждого n-ного элемента — каждого 2-го, 3-го или 4-го и т.д. А потом мне проще представить, что вторая часть выражения — это смещение.

В случае 2n+1 я читаю это выражение следующим образом: «Найти каждый второй элемент и переместить выделение вниз на 1 ».

Если выражение 3n-5 , оно будет читаться так: «Найти каждый третий элемент и переместить выделение вверх на 5 ».

Другие селекторы:nth-child

:nth-child имеет соответствующий ему псевдокласс :nth-last-child , который работает наоборот.

li:nth-last-child(3n) начинает с последнего дочернего элемента и обрабатывает их в обратном направлении, сопоставляя каждый третий элемент с конца списка.

Этот псевдокласс менее распространен. Тем не менее, часто необходимо выбрать первый или последний дочерний элемент. Это можно сделать с помощью :nth-child(1) или :nth-last-child(1) , но этот метод встречается не так часто, как псевдоклассы :first-child и :last-child . При этом только :first-child работает в IE8 , а :last-child и :nth-селекторы — нет.

:nth-of-type

Что меня часто не удовлетворяет, так это то, что псевдокласс CSS nth child отбирает дочерние элементы по индексу и не учитывает тип элемента.

Рассмотрим следующий пример.

lorem ipsum;

Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;

Nunc sed turpis. Donec posuere vulputate arcu;

Есть раздел с заголовком, подзаголовком и несколькими абзацами. Я хочу, чтобы первый абзац немного выделялся с помощью увеличенного размера шрифта 1.5em .

Можно попробовать применить код section p:first-child , так как нужно задать дополнительный стиль для первого абзаца в этом разделе. Но это не сработает, поскольку первый дочерний элемент раздела — h1 . В этом случае необходимо использовать селектор :first-of-type .

Существует целый ряд селекторов этого типа — :first-of-type , :last-of-type , :nth-of-type и :nth-last-of-type . Они ведут себя так же, как :nth-child , но отбирают n-ые экземпляры элементов определенного типа.

Эти селекторы довольно сложны, но они предоставляют большие возможности. Они поддерживаются всеми браузерами, начиная с IE9 , в IE8 поддерживается только :first-child . В прошлом они не раз помогли мне решить несколько сложных задач.

Перевод статьи «AtoZ CSS Screencast: nth-child and nth-of-type » дружной командой проекта

Как задать стили отдельному объекту веб-страницы? Общепринятый способ — назначить класс, идентификатор, или обратиться по тегу. Но такая верстка не всегда работает. Особенно когда дело касается вложенных меню, последних элементов списка, CSS-стилей активных или посещенных ссылок. Именно для таких случаев были созданы псевдоклассы. Это особый вид селекторов, которые берегут нервную систему разработчика и существенно упрощают верстку.

Синтаксис и правила использования псевдоклассов

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

Li:last-child{ padding-bottom: 0; }

Иногда можно встретить двойное написание (::). Эта спецификация была добавлена в CSS3 для обращения к псевдоэлементам::backdrop, ::before, ::after. Они отличаются тем, что добавляют стили объектам, которых нет в дереве DOM. Например, заглавная буква или первая строка.

P::before{ content: ""; display: block; width: 100%; color: #222; }

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

Document

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

Nav a:first-child{ color: green; } nav a:last-child{ color: red; }

Универсальный селектор:nth-child

Этот селектор относится к числу структурных псевдоклассов. С его помощью можно управлять объектами по их нумерации. Порядковое число указывается в скобках и начинается с единицы. Если нужен последний элемент в CSS, для этого используется запись:

/*добавит последнему элементу справа границу красного цвета*/ nav a:nth-child(-1){ border-right: 1px solid red; }

Помимо целочисельных значений:nth-child принимает в качестве значений ключевые слова:

  • odd - нечетные элементы;
  • even - четные.

Теперь чтобы добавить границу желтого цвета каждой второй ссылке в панели навигации, достаточно прописать:

Nav a:nth-child(even){ border-bottom: 1px solid yellow; }

Комбинированное использование псевдоклассов

Каскадные таблицы стилей позволяют комбинировать в одном селекторе сразу несколько псевдоклассов. Такой подход может пригодиться, когда необходимо назначить определенные стили всем CSS элементам, кроме последнего.

Nav a:not(:last-child){ padding-right: 10px; }

Дословно запись выше указывает браузеру добавить ко всем ссылкам внутри навигации