Последний из нас: использование last-child и last-of-type в CSS

Последний из нас: использование last-child и last-of-type в CSS

От автора: CSS псевдоселекторы типа last – еще один удобный способ отделить представление от разметки: чтобы не засорять HTML классами, с помощью которых пытаться задать свойства для последнего элемента внутри блока, и которые нам придется передвигать и переопределять в случае, если контент изменился, мы используем селектор, который будет применен только к последнему элементу без изменений в разметке.

Чтобы правильно использовать last-child, нужно понять, чем отличаются дочерние элементы от смежных в CSS. Скажем, у нас есть следующая разметка:

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

И мы получим:

Последний из нас: использование last-child и last-of-type в CSS

Эффект можно сделать и на 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; }.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: