Last of type

От автора: 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

Дальше примеры:
.

1. http://jsfiddle.net/djvgaw57/
   Класс box выставлен в трех тегах <div> и стиль применится к последнему тегу <div> из всей трехэлементной последовательности тегов <div> .
   .


2. http://jsfiddle.net/mkj7fatu/
   Класс box у двух последовательностей — выбирается последний тег в каждой последовательности.
   .
3. http://jsfiddle.net/jbffqkLh/
   Оказывается даже не важно какие классы будут у тегов, которые находятся в последовательности, и которые не являются последним тегом в последовательности. Важен класс только последнего тега в последовательности.
   .
4. http://jsfiddle.net/fn4s14gn/
   При изменении класса последнего тега в последовательности — стили не накладываются на последний тег, и собсно все.
   .
5. http://jsfiddle.net/9fjppk95/
   Но если такой класс присутствует в последнем теге последовательности таких же тегов — стили накладываются и все работает.
   .
6. http://jsfiddle.net/56kqvyzg/
   Всегда ведь можно импровизировать.
   .
7. http://jsfiddle.net/zn3mq0mo/ Вот это самая интересная!
   Класс box у тега <div> и <span> ,

• Все <div>‘ы с классом box находятся в одном родителе, и собственно наделится цветом только последний дочерный <div> этого родителя;
• Все <span>‘ы с классом box находятся в одном родителе, и собственно наделится цветом только последний дочерный <span> этого родителя;
  .

8. Еще раз перечитай правило и зырь сюда http://jsfiddle.net/515pg3j2/ , сечешь?
   Только последний дочерный тег родителя из всех таких же дочерный тегов этого же родителя.
   .
9. Ну и на финал http://jsfiddle.net/nag633rc/

Вроде формулировку использовал правильную, делал пост и пытался понять 3 часа. Даже если что то не сказал, это можно понять по выложеным примерам.

Слово “Последовательность” использовалось для замены формулировки “Последовательность дочерных одинаковых тегов в общем родителе”

forum.academy