last child css не работает

Есть куча блоков в .main , надо применить стиль к последнему .one Но блок .two мешает этому

JS использовать не хочется, контент динамический и это будет создавать проблемы

Содержание

2 ответа 2
Правильный способ
Псевдоэлемент after в CSS стилях
Псевдокласс last-child
Заключение
Комментарии ( 0 ):

2 ответа 2

Можно все Ваши «one» заключить еще в 1 див с идентификатором, а потом конкретно уже сделать

Вариант 1

Если блок .two всегда есть и он один, воспользуйтесь :nth-last-child(2)

Вариант 2

Подсказано пользователем @Mik. С учетом тонкостей работы псевдокласса :last-of-type можно изменить верстку так, чтобы .two были другими тегами (например

) или уже можно воспользоваться произвольными тегами (например , при этом обязательно указать в css свойство display ) Гугл и Яндекс уже применяют и не стесняются.

Почему не срабатывает :last-child ?

Каждому элементу кроме последнего нужен border-bottom . При добавлении last-child бордер почему-то удаляется у всех элементов.

UPD

В данном случае стили ссылок не влияют на отображение. Им задан свой стиль text-decoration: none;

UPD 1.0

Всем дивам с классом .user-name задан стиль — border-bottom: 1px solid #e2e2e2; .

Суть вопроса — у последнего дива с классом .user-name убрать border-bottom

PS: Все дивы с классом .user-name находятся внутри дива с классом .group-list .

UPD 1.1

При добавлении стиля border-bottom я использую только дивы с классом .user-name что находится внутри них, не имеет значения (к ним не привязываемся).

Для верстальщика псевдоэлементы и псевдоклассы – незаменимые помощники и я вам это сейчас докажу на примере фрагмента PSD макета.

Дизайнеры очень любят разделять пункты меню разными символами, ставя в тупик неопытных верстальщиков. Начинающий верстальщик, наверняка попался бы на удочку и вслед за текстом, понатыкал бы разделители.

В результате мы увидели бы следующую разметку в HTML-документе, как на картинке ниже.

Такой нехитрый способ конечно же работает, но он сильно засоряет код, а практической пользы для семантики от кучи span-ов, никакой нет.

Правильный способ

В HTML коде не нужно вообще, как-то проставлять вертикальные линии. Теперь, мы считаем их псевдоэлементами, а все дальнейшие действия происходить будут в CSS стилях.

Псевдоэлемент after в CSS стилях

Мы видим определенную закономерность, что за каждым пунктом меню, стоит разделитель, значит применяться псевдоэлемент after будет к тегу li.

Символ вертикальная линия имеет следующий код — «07C». Откуда мы узнали? Из таблицы символов Юникода.

Не забудьте убрать дефолтные стили маркеров, круглые точки!

nav ul <
list-style: none;
>

Запишем номер в Юникоде в свойство content.

nav ul li::after <
content: «07C»; /* юникод вертикальная линия */
color: #fff; /* поменять цвет */
font-weight: bold; /* поменять жирность */
position: relative;
padding-left: 4px; /* выравнивание относительно текста по гориз. */
top: -2px; /* выравнивание относительно текста по верт. */
>

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

Псевдокласс last-child

Псевдокласс last-child позволяет задать отдельные стили для последнего элемента, в нашем случае – для последнего псевдоэлемента. Мы просто указываем пустое значение у свойства content и последняя линия пропала.

nav ul li:last-child::after <
content: «»;
>

Заключение

Для использования символов Юникода, кодировка страницы должна обязательно быть UTF-8.

Как понять, в каком случае нужно верстать с псевдоэлементами? Все элементы оформления и украшательства, находящиеся до или после основных элементов. Сейчас редко какой дизайн-макет обходится без необходимости, применять в верстке псевдоэлементы и псевдоклассы.

В этогм видео-курсе «HTML5 и CSS3 с Нуля до Гуру»вы увидите на простых примерах, как верстаются сайты.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: .
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: .

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):