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

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

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

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

<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.

article p:last-child { text-indent: 2rem; }

И мы получим:

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Эффект можно сделать и на nth-child:

article p:nth-child(4) { 
  text-indent: 2rem; 
}

В частности эффективно в стихах, как пример выше, где количество строк в строфе известно заранее.

Стили работают только, если параграф действительно последний в блоке. Если каждый параграф заканчивается горизонтальной полосой:

...
 <p>In Carcosa.</p>
 <hr>
</div>

… тогда параграф уже не будет последним элементом, и правило игнорируется. В таких случаях помогает псевдоселектор last-of-type.

Последний шанс увидеть

Селектор last-of-type selector находит последнее вхождение элемента данного типа и изменяет его.

article p:last-of-type { text-indent: 2rem; }

В этом случае данное правило будет иметь тот же эффект на контент, что и last-child. Оба селектора можно использовать в комбинации с другими: например, можно изменять последнее вхождение класса.

Реальный способ применения last-of-type – удаление визуального эффекта с последнего элемента, когда эффект применен ко всем элементам. Например, панель меню:

<nav>
 <a href="#">Home</a>
 <a href="#">About Us</a>
 <a href="#">Products</a>
</nav>

По дизайну всем ссылкам добавляется рамка с правой стороны, отделяющая пункты меню друг от друга:

nav a { border-right: 1px solid #000; }

Проблема в том, что у последней ссылки тоже будет рамка с правой стороны. Визуально такая рамка означает, что за ней должна быть еще одна ссылка. В случае с последней ссылкой такого быть не должно. Для удаления лишней рамки можно использовать last-child:

nav a { border-right: 1px solid #000; }
nav a:last-child { border-right: none; }

Даже еще лучше, стили можно переписать в одну строку, объединив с помощью nav a:not(:last-child) { border-right: 1px solid #000; }.

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree