Last child css не работает: Почему не срабатывает:last-child? — Хабр Q&A – html — last-child не работает как хотелось бы

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

На чтение 4 мин. Просмотров 2 Опубликовано 15.12.2019

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

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

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 что находится внутри них, не имеет значения (к ним не привязываемся).

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

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

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

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

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

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

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

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

Символ вертикальная линия имеет следующий код — «

Почему не срабатывает :first-child? — Хабр Q&A

У нас есть меню

<div>
		<div>
			<ul>
				<li><a href="#">Вызов курьера</a></li>
				<li><a href="#">Сотрудничество</a></li>
				<li><a href="#">Новости</a></li>
				<li><a href="#">Статьи</a></li>
				<li><a href="#">Видеоблог</a></li>
			</ul>
		</div>
	</div>

И мне нужно было к каждой пункту меню сделать справа и слева бордеры разных цветов
НО! у первого пункта нужно было отменить левый бордер, а у последнего — правый.

Сделал так: к каждой !ССЫЛКЕ! (.top-line .menu ul li a) я применил бордеры:

.top-line .menu ul li {
	float: left;
	padding: 6px 0px;
}

.top-line .menu ul li a {
	color: #474747;
	font-size: 0.857em;
	text-decoration: none;
	padding: 7px 15px;
	border-left: 1px solid #fff;
	border-right: 1px solid #c7c7c7;
}

.top-line .menu ul li a:first-child { border-left: none; }
.top-line .menu ul li a:last-child { border-right: none; }
 

Потом начал отменять бордеры у первого и последнего элемента

.top-line .menu ul li a:first-child { border-left: none; }
.top-line .menu ul li a:last-child { border-right: none; }

И не работали псевдоклассы :first-child и :last-child! Ломал голову. Была ночь 4 часа утра.

На утро дошло 😀

У нас же только одна ссылка внутри li! Какие тут псевдоклассы?!

Поэтому применил бордеры к .top-line .menu ul li.
Псевдоклассы применил к .top-line .menu ul li.

И все заработало 🙂

Полный правильный код ниже:

<div>
		<div>
			<ul>
				<li><a href="#">Вызов курьера</a></li>
				<li><a href="#">Сотрудничество</a></li>
				<li><a href="#">Новости</a></li>
				<li><a href="#">Статьи</a></li>
				<li><a href="#">Видеоблог</a></li>
			</ul>
		</div>
	</div> 

.top-line .menu ul li {
	float: left;
	padding: 6px 0px;
	border-left: 1px solid #fff;
	border-right: 1px solid #c7c7c7;
}

.top-line .menu ul li a {
	color: #474747;
	font-size: 0.857em;
	text-decoration: none;
	padding: 7px 15px;
}

.top-line .menu ul li:first-child { border-left: none; }
.top-line .menu ul li:last-child { border-right: none; }

Псевдоэлемент after и псевдокласс last-child

Вы здесь: Главная — CSS — CSS Основы — Псевдоэлемент after и псевдокласс last-child

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

• Создано 18.01.2019 10:35:15
• Михаил Русаков

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

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

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

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

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

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

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

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

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Css last-child не работает при добавлении divs разных классов

Поскольку вы уже пытались использовать селектор CSS3, тогда это правильный псевдокласс для использования

.MyClass:last-of-type

В соответствии с спецификацией CSS3 (по крайней мере, насколько я понимаю) это должно работать, но похоже, что нет. По крайней мере, не в последних версиях браузера Chrome (v23) и Firefox (v17).

ПРЕДУПРЕЖДЕНИЕ: Верхняя информация не работает и может вводить в заблуждение, что есть чистое решение CSS для этой проблемы… Потому что с CSS3 там нет. CSS4, с другой стороны, будет иметь дополнительный псевдокласс :nth-last-match(n), который, вероятно, будет охватывать этот точный сценарий. Но слишком рано говорить, когда не все селектора CSS3 были реализованы браузерами.

Дополнительное исследование

Здесь JSFiddle, который показывает, как работает этот селектор псевдоселементов:

• получить все элементы, которые удовлетворяют CSS-селектору (без псевдо)
• получить разные типы элементов HTML (теги)
• выберите все элементы sibling того же типа (тег) для каждой группы типов (тегов)
• Уменьшить группу типов (тегов) до последнего элемента в группе
• Остается ли этот оставшийся элемент (каждой группы) селектором (без псевдо)?
• Если true, тогда примените стиль, иначе

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

Это похоже на работу в Chrome и Firefox. И если мы внимательно прочитаем спецификацию, она скажет

Псевдокласс класса :last-of-type представляет элемент, который является последним родством его типа в списке дочерних элементов его родительского элемента.

Если бы он сказал, что это последний брат, который удовлетворил селектор, тогда мое верхнее решение будет работать. Поэтому давайте проверим мои шаги.

Запустите шаги с помощью HTML

• получает первые 3 элемента
• только один тип: div
• четыре элемента (включая последний)
• уменьшить до последнего
• удовлетворяет? Нет
• не устанавливать стиль

Другая пара примеров в моей скрипке

Просто, чтобы проверить это поведение селектора псевдо-класса, я добавил два дополнительных примера. Здесь HTML:

<!-- First -->
<div>
 <div>Content</div>
 <div>Content</div> 
 <p>Content</p>
 <p>Content</p>
</div>
<!-- Second -->
<div>
 <div>Content</div>
 <div>Content</div>
 <div>Content</div>
 <p>Content</p>
</div>

В первом из двух элементов удовлетворяют селектор (последний div и последний p). Во втором один элемент удовлетворяет селектору (последний div)

Результат

Предоставляя HTML, который вы предоставили, и предполагая, что может быть произвольное количество элементов с .MyClass, нет способа написать общий селектор в CSS3, который фактически нацелил бы последний элемент с определенным классом CSS.

Лучший способ — добавить дополнительный класс к элементам, которые представляют последний с определенным классом, и написать селектор для таргетинга на него.

CSS first-child и last-child не работают при использовании одного и того же элемента

Я просто заметил, что CSS :first-child и :last-child не работают при использовании одного и того же элемента. Используется только один. Мне интересно, почему это так, и если есть какой-либо обходной путь к этому в CSS? Мне кажется, что ошибка CSS — первый элемент может быть также последним элементом.

Я не мог найти ничего в Google на эту тему. Каждый учебник предполагает, что будет по крайней мере 2 элемента.

Я ищу что-то вроде: «first child is also last child» селектор. Существует ли она?

Поделиться Источник Atadj     23 августа 2012 в 14:21

2 Ответа

33

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

Это не ошибка. Вот как работает каскад: если элемент является как первым дочерним, так и последним дочерним элементом, то если у вас есть :first-child и :last-child в отдельных правилах, и они оба соответствуют одному и тому же элементу, то что-либо в более позднем объявленном или более конкретном правиле переопределит другое.

Вы можете найти пример такого поведения здесь, со свойством border-radius shorthand и обходными путями, которые включают использование свойств компонента вместо стенографии, а также указание отдельного правила в целом с использованием одного из следующих селекторов…

Я ищу что-то вроде: «first child is also last child» селектор. Существует ли она?

Буквально, Вы бы цепочку оба псевдокласса, как это, который отлично работает:

:first-child:last-child

Однако существует специальный псевдокласс, который действует таким же образом:

:only-child

Основное различие (по сути, единственное различие) между этими двумя селекторами-специфичность: первый более специфичен, поскольку содержит один дополнительный псевдокласс. Нет никакой разницы даже в поддержке браузера, поскольку :last-child и :only-child поддерживаются точно такими же версиями каждого браузера.

Поделиться BoltClock     23 августа 2012 в 14:22

2

Я понимаю, что сильно опаздываю на это ,но вы также можете использовать CSS :first-of-type и :last-of-type. Например:

<blockquote>
  <p>Some text you want to quote</p>
</blockquote>

Этот CSS будет добавить котировки в пункте:

blockquote{
  quotes: "“" "”" "‘" "’";
}

blockquote p:first-of-type:before{
  content:open-quote;
}

blockquote p:last-of-type:after{
  content:close-quote;
}

Поделиться fstorr     26 марта 2016 в 01:23

.MyClass:last-of-type

<!-- First -->
<div>
    <div>Content</div>
    <div>Content</div> 
    <p>Content</p>
    <p>Content</p>
</div>

<!-- Second -->
<div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <p>Content</p>
</div>