Псевдокласс :last-child | CSS справочник

CSS селекторы

Значение и применение

Псевдокласс :last-child применяет стиль к элементу в том случае, если элемент является последним дочерним элементом своего родителя.

Этот псевдокласс в отличие от псевдокласса :first-child выбирает последний дочерний элемент своего родителя, а не первый.

Поддержка браузерами

Селектор
Chrome
Firefox
Opera
Safari
IExplorer
Edge
:last-child4.03.59.63.29.012.0

CSS синтаксис:

:last-child {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:


Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что выделенные элементы <article> и <li> являются последними дочерними элементами своих родителей, и чтобы нам их стилизовать необходимо использовать псевдокласс

:last-child.

Если вы сходу сможете ответить почему ни один элемент <h3> на изображении выше нельзя стилизовать с использованием псевдокласса :last-child, то можете сразу перейти к примеру, если нет, то внимательно изучите следующее изображение, оно поможет Вам до конца понять как работает псевдокласс :last-child:


Схема работы псевдокласса :last-child.

Еще раз поясню, если вы создадите селектор h3:last-child, то браузер не найдет этот элемент по той причине, что нет элементов <h3>, которые являются последними дочерними элементами своего родителя, важно это понять, так как подобные вещи иногда ставят людей в ступор.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
article:last-child { /* выбираем каждый элемент <article>, который является последним дочерним элементом своего родителя */
color: blue; /* устанавливаем цвет текста */
}
li:first-child{ /* выбираем каждый элемент <li>, который является последним дочерним элементом своего родителя */
color: red; /* устанавливаем цвет текста */
font-size: 24px; /* устанавливаем размер шрифта */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html>

В этом примере с использованием псевдокласса :last-child мы стилизовали элементы <article> и <li>, которые являются последними дочерними элементами своих родителей.

Результат нашего примера:

Пример использования псевдокласса :last-child.CSS селекторы

Псевдокласс nth-last-child — n-ный потомок родителя, отсчет с конца

Псевдокласс nth-last-child выбирает элемент, который является n-ным потомком родителя, отсчитывая с конца. Ведет себя аналогично nth-child, только отсчет ведется с конца.

Синтаксис

селектор:nth-last-child(число | odd | even | выражение) { }

Значения

ЗначениеОписание
число Положительное число начиная с
1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
oddНечетные элементы.
evenЧетные элементы.
выражение Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго).
Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (
нумерация элементов с 1!), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего!), и так далее.

Пример

В данном примере мы сделаем красного цвета тот li, который является 4-тым с конца потомком своего родителя (4-тым внутри ol):

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>li:nth-last-child(4) { color: red; }

:

Пример

Сейчас красными сделаем все четные с конца li:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>li:nth-last-child(even) { color: red; }

:

Пример

Сейчас красными сделаем все нечетные с конца li:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>

li:nth-last-child(odd) { color: red; }

:

Пример

Сейчас красными сделаем каждую третью с конца li (начиная с третьей с конца):

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>li:nth-last-child(3n) { color: red; }

:

Псевдокласс

— проблема с селектором CSS «все, кроме последнего»

Задавать вопрос

спросил

Изменено 5 лет, 4 месяца назад

Просмотрено 5к раз

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

 .list:not(:last-child) > .sublist {
  красный цвет;
}

Но это касается всех подсписков. Вот демонстрационный код (скрипка: http://jsfiddle.net/8m72m53r/3/):

 :not(:last-child) > .row {
  красный цвет;
} 
 <ул>
  
  • Один
    • 
  
  • Два
    • 
  
  • Три
    • 

<ул>
  
  • Четыре
    • 
  
  • Пять
    • 
  
  • Шесть
    • 

<ул>
  
  • Семь
    • 
  
  • Восемь
    • 
  
  • Девять
    •
    • css
    • псевдокласс

    0

    Вот и все — у вас почти все получилось, просто убедитесь, что вы используете псевдокласс :last-of-type

     .box:not(:last-of-type) >
     
     .row {
    красный цвет;
} 
     <ул>
    
  • Один
    • 
    
  • Два
    • 
    
  • Три
    • 

<ул>
    
  • Четыре
    • 
    
  • Пять
    • 
    
  • Шесть
    • 

<ул>
    
  • Семь
    • 
    
  • Восемь
    • 
    
  • Девять
    •

    0

    Это может вам помочь:

     . box>.row:not(:last-of-type)

    Я не уверен, что вы ищете это. Но если вы хотите стилизовать все элементы, кроме последних, используйте что-то вроде этого:

     .row:not(:last-child) {
    красный цвет;
}

    Зарегистрируйтесь или войдите

    Зарегистрироваться через Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    html — Форма селектора CSS: последний дочерний элемент не работает

    спросил

    Изменено 5 лет, 3 месяца назад

    Просмотрено 2к раз

    Кажется, псевдокласс CSS :last-child не работает с элементами формы, но :first-child работает.

     форма: первый ребенок {
  граница: 1px сплошной синий;
}
форма: последний ребенок {
  граница: 1px сплошной красный;
} 
     <тело>
  <форма>
    
    Первая форма
    
  
  <форма>
    
    Вторая форма

    JSFiddle

    Меня интересует только стиль самого элемента формы, и я тестировал это только в Chrome. Первая форма получает синий фон, а вторая не имеет фона. Инспектор Chrome не показывает :last-child применяется и ко второй форме. Так как же выбрать последнюю форму с помощью CSS?

    • html
    • css
    • css-селекторы
    • псевдокласс

    1

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

    Чтобы увидеть, как он работает на вашей скрипке, просто оберните формы в контейнер div, и вы должны увидеть его, как и ожидалось:

     
  <дел>
    <форма>
      
    Первая форма
    
    
    <форма>
      
    Вторая форма

    вы можете обратиться к этому вопросу для получения дополнительной информации.

    1

    Для использования первого потомка и last-child вам нужно обратиться к их «родителю», как в примере ниже.

     .container форма: первый дочерний элемент {
  граница: 1px сплошной синий;
}

.container форма:последний ребенок {
  граница: 1px сплошной красный;
} 
     <дел>
  <форма>
    
    Первая форма
    
  
  <форма>
    
    Вторая форма