Псевдокласс :nth-last-child
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo |
Версии CSS
Описание
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчет ведется не от первого элемента, а от последнего.
Синтаксис
Значения
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
HTML5 CSS3 IE Cr Op Sa Fx
В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы
Псевдокласс :nth-last-child
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.6+ | 2.1+ | 2.0+ |
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo |
Версии CSS
Описание
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчет ведется не от первого элемента, а от последнего.
Синтаксис
Значения
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
HTML5 CSS3 IE Cr Op Sa Fx
В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы
CSS псевдокласс :last-child
Значение и применение
Псевдокласс :last-child
применяет стиль к элементу в том случае, если элемент является последним дочерним элементом своего родителя.
Этот псевдокласс в отличие от псевдокласса :first-child выбирает последний дочерний элемент своего родителя, а не первый.
Поддержка браузерами
| Селектор | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| :last-child | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
CSS синтаксис:
Версия CSS
Пример использования
Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:
Пример выбора селектора дочерних элементов.
Если вы сходу сможете ответить почему ни один элемент
Схема работы псевдокласса :last-child.
Еще раз поясню, если вы создадите селектор h2:last-child, то браузер не найдет этот элемент по той причине, что нет элементов
Перейдем к примеру:
Результат нашего примера:
Пример использования псевдокласса :last-child. CSS селекторы
Last child css что это
Особую группу псевдоклассов образуют псевдоклассы, которые позволяют выбрать определенные дочерние элементы:
:first-child : представляет элемент, который является первым дочерним элементом
:last-child : представляет элемент, который является последним дочерним элементом
:only-child : представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере
:only-of-type : выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере
:nth-child(n) : представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент
:nth-last-child(n) : представляет дочерний элемент, который имеет определенный номер n, начиная с конца
:nth-of-type(n) : выбирает дочерний элемент определенного типа, который имеет определенный номер
:nth-last-of-type(n) : выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца
Псевдокласс first-child
Используем псевдокласс first-child для выбора первых ссылок в блоках:
Стиль по селектору a:first-child применяется к ссылке, если она является первым дочерним элементом любого элемента.
В первом блоке элемент ссылки является первым дочерним элементом, поэтому к нему применяется определенный стиль.
А во втором блоке первым элементом является параграф, поэтому ни к одной ссылке не применяется стиль.
Псевдокласс last-child
Используем псевдокласс last-child :
Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами.
В первом блоке как раз последним дочерним элементом является ссылка. А вот во втором последним дочерним элементом является параграф, поэтому во втором блоке стиль не применяется ни к одной из ссылок.
Селектор only-child
Селектор :only-child выбирает элементы, которые являются единственными дочерними элементами в контейнерах:
Псевдокласс only-of-type
Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере. Например, единственный элемент div, при этом элементов других типов в этом же контейнере может быть сколько угодно.
Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не один. Зато в body есть только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент span, поэтому он также будет стилизован.
Псевдокласс nth-child
Псевдокласс nth-child позволяет стилизовать каждый второй, третий элемент, только четные или только нечетные элементы и т.д.
Например, стилизуем четные и нечетные строки таблицы:
Чтобы определить стиль для нечетных элементов, в селектор передается значение «odd»:
Для стилизации четных элементов в селектор передается значение «even»:
Также в этот селектор мы можем передать номер стилизуемого элемента:
В данном случае стилизуется третья строка.
Еще одну возможность представляет использование заменителя для номера, который выражается буквой n :
Здесь стиль применяется к каждой второй нечетной строке.
Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет после знака плюс, показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого дочернего элемента.
Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 * 2 + 1 = 5-й элемент и так далее.
К примеру, если мы хотим выделить каждый третий элемент, начиная со второго, то мы могли бы написать:
Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца:
Псевдокласс nth-of-type
Псевдокласс :nth-of-type позволяет выбрать дочерний элемент определенного типа по определенному номеру:
Псевдокласс :nth-last-child
Псевдокласс :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.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы. Отсчёт ведётся от последнего элемента.
