Есть куча блоков в .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
Запишем номер в Юникоде в свойство content.
nav ul li::after
Вертикальные линии встали, как мы и хотели, за исключением последнего. Дело в том, что на макете нет последнего разделителя и на этот случай, то же есть элегантный псевдо-выход.
Псевдокласс last-child
Псевдокласс last-child позволяет задать отдельные стили для последнего элемента, в нашем случае – для последнего псевдоэлемента. Мы просто указываем пустое значение у свойства content и последняя линия пропала.
nav ul li:last-child::after <
content: «»;
>
Заключение
Для использования символов Юникода, кодировка страницы должна обязательно быть UTF-8.
Как понять, в каком случае нужно верстать с псевдоэлементами? Все элементы оформления и украшательства, находящиеся до или после основных элементов. Сейчас редко какой дизайн-макет обходится без необходимости, применять в верстке псевдоэлементы и псевдоклассы.
В этогм видео-курсе «HTML5 и CSS3 с Нуля до Гуру»вы увидите на простых примерах, как верстаются сайты.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.
Источник: