От автора: CSS псевдоселекторы типа last – еще один удобный способ отделить представление от разметки: чтобы не засорять HTML классами, с помощью которых пытаться задать свойства для последнего элемента внутри блока, и которые нам придется передвигать и переопределять в случае, если контент изменился, мы используем селектор, который будет применен только к последнему элементу без изменений в разметке.
Чтобы правильно использовать last-child, нужно понять, чем отличаются дочерние элементы от смежных в CSS. Скажем, у нас есть следующая разметка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<article> <div> <p>Along the shore the cloud waves break,</p> <p>The twin suns sink behind the lake,</p> <p>The shadows lengthen</p> <p>In Carcosa.</p> </div> <div> <p>Strange is the night where black stars rise,</p> <p>And strange moons circle through the skies,</p> <p>But stranger still is</p> <p>Lost Carcosa.</p> </div> </article> |
Добавить отступ в последний параграф в теге div можно разными способами: можно прописать повторяющиеся инлайновые стили (очень необдуманно, такие стили сложно обслуживать и изменять, занимает много времени); можно использовать повторяющийся класс (лучше, но создание, изменение и применение занимает все еще слишком много времени); с помощью nth-child или самый лучший вариант – last-child.
1 |
article p:last-child { text-indent: 2rem; } |
И мы получим:
Эффект можно сделать и на nth-child:
1 2 3 |
article p:nth-child(4) { text-indent: 2rem; } |
В частности эффективно в стихах, как пример выше, где количество строк в строфе известно заранее.
Стили работают только, если параграф действительно последний в блоке. Если каждый параграф заканчивается горизонтальной полосой:
1 2 3 4 |
... <p>In Carcosa.</p> <hr> </div> |
… тогда параграф уже не будет последним элементом, и правило игнорируется. В таких случаях помогает псевдоселектор last-of-type.
Последний шанс увидеть
Селектор last-of-type selector находит последнее вхождение элемента данного типа и изменяет его.
1 |
article p:last-of-type { text-indent: 2rem; } |
В этом случае данное правило будет иметь тот же эффект на контент, что и last-child. Оба селектора можно использовать в комбинации с другими: например, можно изменять последнее вхождение класса.
Реальный способ применения last-of-type – удаление визуального эффекта с последнего элемента, когда эффект применен ко всем элементам. Например, панель меню:
1 2 3 4 5 |
<nav> <a href="#">Home</a> <a href="#">About Us</a> <a href="#">Products</a> </nav> |
По дизайну всем ссылкам добавляется рамка с правой стороны, отделяющая пункты меню друг от друга:
1 |
nav a { border-right: 1px solid #000; } |
Проблема в том, что у последней ссылки тоже будет рамка с правой стороны. Визуально такая рамка означает, что за ней должна быть еще одна ссылка. В случае с последней ссылкой такого быть не должно. Для удаления лишней рамки можно использовать last-child:
1 2 |
nav a { border-right: 1px solid #000; } nav a:last-child { border-right: none; } |
Даже еще лучше, стили можно переписать в одну строку, объединив с помощью nav a:not(:last-child) { border-right: 1px solid #000; }.
Источник: //thenewcode.com/
Редакция: Команда webformyself.