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

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

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

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

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

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

В результате мы увидели бы следующую разметку в

HTML-документе, как на картинке ниже.

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

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

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

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

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

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

Почему не срабатывает :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

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

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

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

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

<li>
<a href="#">Home</a>
    <span>|</span>
</li>

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

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

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

span-ов, никакой нет.

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

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

<nav>
  <ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">Sale</a>
  </li>
  <li>
    <a href="#">Handbags</a>
  </li>
  <li>
    <a href="#">Wallets</a>
  </li>
  <li>
    <a href="#">Accessories</a>
  </li>
  <li>
    <a href="#">Mens Store</a>
  </li>
  <li>
    <a href="#">Shoes</a>
  </li>
  <li>
    <a href="#">Vintage</a>
  </li>
  <li>
    <a href="#">Services</a>
  </li>
  <li>
    <a href="#">Contact Us</a>
  </li>
  </ul>
</nav>

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

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

nav ul li::after {
}

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

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

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

nav ul {
    list-style: none;
}

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

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

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

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

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

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

nav ul li:last-child::after {
    content: "";
}

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

Заключение

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

UTF-8.

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

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

  • Псевдоэлемент after и псевдокласс last-child. Создано 18.01.2019 10:35:15
  • Псевдоэлемент after и псевдокласс last-child. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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" селектор. Существует ли она?

html css css3 css-selectors

Поделиться Источник 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



Как именно last-child/first-child работает?

У меня есть вопрос, как работают первый ребенок и последний ребенок с элементами и классами? Посмотрите на мой пример И по этому поводу у меня есть несколько вопросов: Почему это правило не...


:last-child работает,: first-child нет

У меня есть aside с двумя <div class=sku> элементами. Я пытаюсь использовать CSS, чтобы манипулировать :first-child , но это не работает. Однако при попытке доступа к :last-child это...


Как исключить класс при использовании селекторов :first-child и: last-child в jQuery

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


Возьмите last-child вместо first-child в единственной строке таблицы

У меня есть следующие CSS: table tbody tr:last-child td { padding-top: 7px; border-bottom: 0; } table tbody tr:first-child td { padding-top: 6px; } Теперь у меня может быть таблица только с одной...


селекторы last-child и first-child не работают

Я строю навбар. Вот чего я хочу; измените background-color на ссылке, когда Гувер над ним. первый и последний фон ссылки должны иметь круглые углы. Проблема в том, что либо все ссылки получают...


Google Chrome и nth-last-child

Следующий CSS работает в браузере Firefox, IE9 и Gnome Web. li.col:nth-child(3n+1):nth-last-child(2), li.col:nth-child(3n+1):nth-last-child(2) + li {width: 47.5%;} Первая строка должна выбрать...


селекторы nth-child или first/last-child не работают. Как правильно их применять?

У меня есть структура: <div id=div> <ul class=ul> <li class=li_one> </li> <li class=li_two> </li> </ul> </div> Я хочу установить background:red на...


Как удалить класс first-child и last-child из <li> в wordpress?

<div class=containerPersonal> <ul> <li class=dropdownPersonal first-child><a href=# data-toggle=dropdownPersonal>Home<i class=iconArrow></i></a></li>...


Clearfix ломает: last-child

Это странно, но когда я использую: last-child для своих элементов, а затем ставлю clearfix div В конце, он ломает last-child? Есть идеи у кого-нибудь? HTML: <div> <a href=#>first...


Является ли селектор: last-child плохим для производительности?

Я использую селектор :last-child много раз, в основном при использовании border-bottom в списке, где я использую border: none; для последнего ребенка,или при использовании полей. Итак, мой вопрос:...


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

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

.MyClass:last-of-type

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

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

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

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

  1. получить все элементы, которые удовлетворяют селектору CSS (без псевдо)
  2. получить их различные типы элементов HTML (теги)
  3. выбрать все элементы одного и того же типа (тега) для каждой группы типов (тегов)
  4. Сократить каждую группу типов (тегов) до последнего элемента в группе
  5. Удовлетворяет ли этот оставшийся элемент (каждой группы) селектор (без псевдо)?
  6. Если true, тогда применяйте стиль, иначе не

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

Кажется, это работает одинаково в Chrome и Firefox. И если мы внимательно прочитаем спецификацию, это говорит

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

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

Выполните шаги, используя ваш HTML

  1. получает первые 3 элемента
  2. только один тип: div
  3. четыре элемента (включая последний)
  4. уменьшить до последнего
  5. удовлетворяет? нет
  6. не устанавливать стиль

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

Чтобы проверить поведение селектора псевдоклассов, я добавил два дополнительных примера. Вот 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 и предполагая, что в .MyClass может быть произвольное количество элементов, невозможно написать общий селектор в CSS3, который бы фактически нацелился на последний элемент с определенным классом CSS.

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

Отправить ответ

avatar
  Подписаться  
Уведомление о