От автора: CSS псевдоселекторы типа last – еще один удобный способ отделить представление от разметки: чтобы не засорять HTML классами, с помощью которых пытаться задать свойства для последнего элемента внутри блока, и которые нам придется передвигать и переопределять в случае, если контент изменился, мы используем селектор, который будет применен только к последнему элементу без изменений в разметке.
Чтобы правильно использовать last-child, нужно понять, чем отличаются дочерние элементы от смежных в CSS. Скажем, у нас есть следующая разметка:
Добавить отступ в последний параграф в теге div можно разными способами: можно прописать повторяющиеся инлайновые стили (очень необдуманно, такие стили сложно обслуживать и изменять, занимает много времени); можно использовать повторяющийся класс (лучше, но создание, изменение и применение занимает все еще слишком много времени); с помощью nth-child или самый лучший вариант – last-child.
И мы получим:

Эффект можно сделать и на nth-child:
В частности эффективно в стихах, как пример выше, где количество строк в строфе известно заранее.
Стили работают только, если параграф действительно последний в блоке. Если каждый параграф заканчивается горизонтальной полосой:
… тогда параграф уже не будет последним элементом, и правило игнорируется. В таких случаях помогает псевдоселектор last-of-type.
Последний шанс увидеть
Селектор last-of-type selector находит последнее вхождение элемента данного типа и изменяет его.
В этом случае данное правило будет иметь тот же эффект на контент, что и last-child. Оба селектора можно использовать в комбинации с другими: например, можно изменять последнее вхождение класса.
Реальный способ применения last-of-type – удаление визуального эффекта с последнего элемента, когда эффект применен ко всем элементам. Например, панель меню:
По дизайну всем ссылкам добавляется рамка с правой стороны, отделяющая пункты меню друг от друга:
Проблема в том, что у последней ссылки тоже будет рамка с правой стороны. Визуально такая рамка означает, что за ней должна быть еще одна ссылка. В случае с последней ссылкой такого быть не должно. Для удаления лишней рамки можно использовать last-child:
Даже еще лучше, стили можно переписать в одну строку, объединив с помощью nav a:not(:last-child) { border-right: 1px solid #000; }.
Источник: http://thenewcode.com/
Редакция: Команда webformyself.
webformyself.com
Потестил эту муть немного, инфу поискал. Вот что вышло…
Короче :last-of-type как и :nth-last-of-type работают исправно и аналогично-противоположно(аля словоблуд) как и :first-of-type ,просто есть одна важная особенность.
Вот тут можно поиграть с этим явлением: http://jsfiddle.net/a5r3jut3/ .
Короткое и ясное правило для использования этого псевдо класса: (путь к последнему такому дочерному тегу родителя):last-of-type
Дальше примеры:
.
- http://jsfiddle.net/djvgaw57/
Класс box выставлен в трех тегах<div>
и стиль применится к последнему тегу<div>
из всей трехэлементной последовательности тегов<div>
.
. - http://jsfiddle.net/mkj7fatu/
Класс box у двух последовательностей — выбирается последний тег в каждой последовательности.
. - http://jsfiddle.net/jbffqkLh/
Оказывается даже не важно какие классы будут у тегов, которые находятся в последовательности, и которые не являются последним тегом в последовательности. Важен класс только последнего тега в последовательности.
. - http://jsfiddle.net/fn4s14gn/
При изменении класса последнего тега в последовательности — стили не накладываются на последний тег, и собсно все.
. - http://jsfiddle.net/9fjppk95/
Но если такой класс присутствует в последнем теге последовательности таких же тегов — стили накладываются и все работает.
. - http://jsfiddle.net/56kqvyzg/
Всегда ведь можно импровизировать.
. - http://jsfiddle.net/zn3mq0mo/ Вот это самая интересная!
Класс box у тега<div>
и<span>
,
- Все
<div>
‘ы с классом box находятся в одном родителе, и собственно наделится цветом только последний дочерный<div>
этого родителя; - Все
<span>
‘ы с классом box находятся в одном родителе, и собственно наделится цветом только последний дочерный<span>
этого родителя;
.
- Еще раз перечитай правило и зырь сюда http://jsfiddle.net/515pg3j2/ , сечешь?
Только последний дочерный тег родителя из всех таких же дочерный тегов этого же родителя.
. - Ну и на финал http://jsfiddle.net/nag633rc/
Вроде формулировку использовал правильную, делал пост и пытался понять 3 часа. Даже если что то не сказал, это можно понять по выложеным примерам.
Слово “Последовательность” использовалось для замены формулировки “Последовательность дочерных одинаковых тегов в общем родителе”
forum.academy