Товаров: 0 (0р.)

Nth child last: Псевдокласс :nth-last-child | htmlbook.ru

Содержание

Псевдокласс :nth-last-child | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.6+3.1+3.6+2.1+2.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

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

Значения

odd
Все нечетные номера элементов.
even
Все четные номера элементов.
число
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
выражение
Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса
ЗначениеНомера элементовОписание
11Последний элемент, является синонимом псевдокласса :last-child.
55Пятый элемент с конца.
2n2, 4, 6, 8, 10Все четные элементы, аналог значения even.
2n+11, 3, 5, 7, 9
Все нечетные элементы, аналог значения odd.
3n+22, 5, 8, 11, 14—
-n+33, 2, 1—
5n-23, 8, 13, 18, 23—
even2, 4, 6, 8, 10Все четные элементы.
odd1, 3, 5, 7, 9Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-last-child</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные границы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   td {
    border: 1px solid #333; /* Параметры рамки */
    padding: 3px; /* Поля в ячейках */
    border-left: 3px double #333; /* Граница слева */ 
   }
   td:nth-last-child(2n+1) {
    background: #f0f0f0; /* Цвет фона */
   }
   td:nth-child(1) {
    border: 1px solid #333; /* Параметры рамки */
    background: #cfc; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr> 
    <td>&nbsp;</td><td>2134</td><td>2135</td>
    <td>2136</td><td>2137</td><td>2138</td>
   </tr>
   <tr> 
    <td>Нефть</td><td>16</td><td>34</td>
    <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>4</td><td>69</td>
    <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>7</td><td>73</td>
    <td>79</td><td>34</td><td>86</td>
   </tr>
   <tr>
    <td>Камни</td><td>23</td><td>34</td>
    <td>88</td><td>53</td><td>103</td>
   </tr>
  </table> 
 </body>
</html>

В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).

Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы

Псевдокласс :last-child | htmlbook.ru


Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.6+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.

Синтаксис

элемент:last-child { … }

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>last-child</title>
  <style>
   .block {
    background: #7da7d9; /* Цвет фона */
    color: #fff; /* Цвет текста */
   }
   .block :first-child {
    padding: 10px; /*  Поля вокруг текста */
   }
   .block :last-child { 
    background: #dda458 url(images/line.png) repeat-x; /* Параметры фона */
    height: 5px; /* Высота блока */
   }
  </style>
 </head>
 <body>
  <div>
   <div>
    При истечении возможности понимания вышеизложенной информации вы
    имеете объективную возможность подать официальный запрос главному 
    субординатору локальной виртуальной вселенной.
   </div>
   <div></div>
  </div>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере псевдокласс :last-child применяется для определения стиля последнего тега <div>, расположенного внутри контейнера с именем класса block. Это позволило создать цветную полосу внизу блока без включения новых классов.

Рис. 1. Результат использования псевдокласса :last-child

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

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

CSS селекторы

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

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

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

CSS cинтаксис:

:nth-last-child(номер) {
блок объявлений;
}

Версия CSS

CSS3

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

Псевдокласс :nth-last-child() позволяет выбрать не только чётные и нечетные значения, но и заданные по определённой формуле. Также допускается указывать просто цифру, используя при этом как отрицательные так и положительные значения.

<!DOCTYPE html>
<html>
<head>
<title>Псевдоклассы и псевдоэлементы</title>
<style type = "text/css"> 
td:nth-last-child(4) {
background-color: orange;
}
td:nth-last-child(2) {
background-color: lime;
}
td:nth-last-child(2n+1) {
background-color: gray;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
Пример использования псевдокласса :nth-last-child() в CSS.

Давайте разберем еще очень важный пример, чтобы понять в чем отличие :nth-last-child от :nth-last-of-type().

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать первый абзац отлично от второго, установив задний фон цвета khaki (пойдя при этом очень хитрым путём…):

<article>
<p>Первый параграф </p>
<p>Второй параграф</p> 
</article>

Мы стоим перед выбором, что использовать p:nth-last-child(2) или p:nth-last-of-type(2) .

Попробуем оба варианта:
p:nth-child(2)  {
background-color: khaki;
}
p:nth-of-type(2) {
background-color: khaki;
}

Что не удивительно оба селектора работают для данной задачи и выделяют первый абзац.

Но в чём разница?

В данном примере псевдокласс :nth-last-child() выбирает этот элемент если это параграф и это второй элемент одного родителя (считая от последнего дочернего элемента).

А :nth-last-of-type(), выбирает элемент если это второй параграф одного родителя (считая от последнего дочернего элемента).

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

Для этого после основного содержания статьи мы размещаем ссылку — элемент <a> на страницу.

<!DOCTYPE html>
<html>
<head>
<title>Псевдоклассы :nth-last-of-type() и :nth-last-child()</title>
<style type = "text/css"> 
p:nth-last-of-type(2) {
background-color:khaki;
}
p:nth-last-child(2)  {
background-color:khaki;
}
</style>
</head>
<body>
<article>
<p>Первый параграф</p>
<p>Второй параграф</p>
<a href = "http://ya.ru">Ссылка на ресурс источник</h3>
</article>
</body>
</html>
Пример использования псевдоклассов :nth-last-of-type() и :nth-last-child().

Что в итоге у нас изменится?

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

Для данной задачи оптимальным выбором является использование :nth-last-of-type() по объективным причинам:

p:nth-last-of-type(2)  {
background-color: khaki;
}
CSS селекторы

Псевдо-класс :nth-last-child(n) | CSS селектор

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

12.0+ 9.0+ 3.5+ 4.0+ 9.6+ 3.2+

Описание

Псевдо-класс :nth-last-child(n) применяет заданный стиль к элементу, который является «n» дочерним элементом, заданного типа, считая от последнего элемента(независимо от его типа) своего родителя.
n — может быть числом, ключевым словом или формулой.

Пример формулы (an + b):

p:nth-last-child(3n+0) { color:red; }

a — представляет собой цикл, n — счетчик (начинается с 0) и b — это значение смещения, указывающее с какого элемента, отсчитывая от последнего, начнется цикл.

Ключевые слова odd(нечетные) и even(четные), могут быть использованы в соответствии с дочерними элементами, индекс которых составляет четное или нечетное значение (индекс последнего дочернего элемента начинается с 1):

p:nth-last-child(odd) { color:#ff0000; }
Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      p:nth-last-child(2) {
        color: red;
        background-color: yellow;
      }
    </style>
  </head>
  <body>

    <p>Первый абзац.</p>
    <p>Второй абзац.</p>
    <p>Третий абзац.</p>
    <div><p>Первый абзац.</p><p>Второй абзац.</p></div>

  </body>
</html>
Результат данного примера:

Первый абзац.

Второй абзац.

Третий абзац.

Первый абзац.

Второй абзац.

Псевдокласс :last-child | CSS | WebReference

Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

<article>
  <h2>Роль цитокинов при дорсалгии</h2>
  <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
  <p>Содержание статьи</p>
  <address>Почта: [email protected]</address>
  <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p>
</article>

Псевдокласс :last-child без указания селектора выберет все последние элементы внутри <article> и установит для них красный цвет текста. Здесь последними идут <p> и <time> они и будут выбраны.

article :last-child { color: red; }

При добавлении селектора к :last-child сперва берётся последний элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это последний элемент и это элемент указанного типа. Здесь красным цветом будет выделен абзац, поскольку последним идёт именно <p>.

article p:last-child { color: red; }

Если вместо p использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «последний элемент это <h2>».

article h2:last-child { color: red; }

Для выбора последнего элемента определённого типа используйте псевдокласс :last-of-type.

Вместо :last-child допустимо использовать :nth-last-child(1).

Синтаксис 

Селектор:last-child { ... }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>last-child</title> <style> .block { background: #7da7d9; /* Цвет фона */ color: #fff; /* Цвет текста */ } .block :first-child { padding: 10px; /* Поля вокруг текста */ } .block :last-child { background: #dda458 url(/example/image/line.png) repeat-x; /* Параметры фона */ height: 5px; /* Высота блока */ } </style> </head> <body> <div> <div> При истечении возможности понимания вышеизложенной информации вы имеете объективную возможность подать официальный запрос главному субординатору локальной виртуальной вселенной. </div> <div></div> </div> </body> </html>

Результат примера показан на рис. 1. В данном примере псевдокласс :last-child применяется для определения стиля последнего элемента <div>, расположенного внутри контейнера с именем класса block. Это позволило создать цветную полосу внизу блока без включения новых классов.

Рис. 1. Результат использования псевдокласса :last-child

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 06.08.2018

Редакторы: Влад Мержевич

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

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

Последнее обновление: 21.04.2016

Особую группу псевдоклассов образуют псевдоклассы, которые позволяют выбрать определенные дочерние элементы:

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

  • :last-child: представляет элемент, который является последним дочерним элементом

  • :only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере

  • :only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере

  • :nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент

  • :nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца

  • :nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер

  • :nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца

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

Используем псевдокласс first-child для выбора первых ссылок в блоках:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:first-child{
			
				color: red;
			}
        </style>
    </head>
    <body>
		<h4>Планшеты</h4>
		<div>
			<a>Microsoft Surface Pro 4</a><br/>
			<a>Apple iPad Pro</a><br/>
			<a>ASUS ZenPad Z380KL</a>
		</div>
		<h4>Смартфоны</h4>
		<div>
			<p>Топ-смартфоны 2016</p>
			<a>Samsung Galaxy S7</a><br/>
			<a>Apple iPhone SE</a><br/>
			<a>Huawei P9</a>
		</div>
    </body>
</html>

Стиль по селектору a:first-child применяется к ссылке, если она является первым дочерним элементом любого элемента.

В первом блоке элемент ссылки является первым дочерним элементом, поэтому к нему применяется определенный стиль.

А во втором блоке первым элементом является параграф, поэтому ни к одной ссылке не применяется стиль.

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

Используем псевдокласс last-child:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:last-child{
			
				color: blue;
			}
        </style>
    </head>
    <body>
		<h4>Смартфоны</h4>
		<div>
			<a>Samsung Galaxy S7</a><br/>
			<a>Apple iPhone SE</a><br/>
			<a>Huawei P9</a>
		</div>
		<h4>Планшеты</h4>
		<div>
			<a>Microsoft Surface Pro 4</a><br/>
			<a>Apple iPad Pro</a><br/>
			<a>ASUS ZenPad Z380KL</a>
			<p>Данные за 2016</p>
		</div>
    </body>
</html>

Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами.

В первом блоке как раз последним дочерним элементом является ссылка. А вот во втором последним дочерним элементом является параграф, поэтому во втором блоке стиль не применяется ни к одной из ссылок.

Селектор only-child

Селектор :only-child выбирает элементы, которые являются единственными дочерними элементами в контейнерах:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
		p:only-child{
			color:red;
		}
        </style>
    </head>
    <body>
		<h3>Заголовок</h3>
		<div>
			<p>Текст1</p>
		</div>
		<div>
			<p>Текст2</p>
			<p>Текст3</p>
		</div>
		<div>
			<p>Текст4</p>
		</div>
	</body>
</html>

Параграфы с текстами «Текст1» и «Текст4» являются единственными дочерними элементами в своих внешних контейнерах, поэтому к ним применяется стиль — красный цвет шрифта.

Псевдокласс only-of-type

Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере. Например, единственный элемент div, при этом элементов других типов в этом же контейнере может быть сколько угодно.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
		span:only-of-type{
		
			color: green;	/* зеленый цвет */
		}
		p:only-of-type{
		
			color: red;	/* красный цвет */
		}
		div:only-of-type{
		
			color: blue;	/* синий цвет */
		}
        </style>
    </head>
    <body>
		<div>
			Header
		</div>
		<p>Единственный параграф и <span>элемент спан</span></p>
		<div>
			Footer
		</div>
	</body>
</html>

Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не один. Зато в body есть только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент span, поэтому он также будет стилизован.

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

Псевдокласс nth-child позволяет стилизовать каждый второй, третий элемент, только четные или только нечетные элементы и т.д.

Например, стилизуем четные и нечетные строки таблицы:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			tr:nth-child(odd) { background-color: #bbb; }
			tr:nth-child(even) { background-color: #fff; }
        </style>
    </head>
    <body>
		<h4>Смартфоны</h4>
		<table>
			<tr><td>Samsung</td><td>Galaxy S7 Edge</td><td>60000</td></tr>
			<tr><td>Apple</td><td>iPhone SE</td><td>39000</td></tr>
			<tr><td>Microsoft</td><td>Lumia 650</td><td>13500</td></tr>
			<tr><td>Alcatel</td><td>Idol S4</td><td>30000</td></tr>
			<tr><td>Huawei</td><td>P9</td><td>60000</td></tr>
			<tr><td>HTC</td><td>HTC 10</td><td>50000</td></tr>
			<tr><td>Meizu</td><td>Pro 6</td><td>40000</td></tr>
			<tr><td>Xiaomi</td><td>Mi5</td><td>35000</td></tr>
		</table>
    </body>
</html>

Чтобы определить стиль для нечетных элементов, в селектор передается значение «odd»:

tr:nth-child(odd){}

Для стилизации четных элементов в селектор передается значение «even»:

tr:nth-child(even){}

Также в этот селектор мы можем передать номер стилизуемого элемента:

tr:nth-child(3) { background-color: #bbb; }

В данном случае стилизуется третья строка.

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

tr:nth-child(2n+1) { background-color: #bbb; }

Здесь стиль применяется к каждой второй нечетной строке.

Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет после знака плюс, показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого дочернего элемента.

Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 * 2 + 1 = 5-й элемент и так далее.

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

tr:nth-child(3n+2) { background-color: #bbb; }

Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца:


tr:nth-last-child(2) { 
	background-color: #bbb; /* 2 строка с конца, то есть предпоследняя  */
}
tr:nth-last-child(2n+1) {  
	background-color: #eee; /* нечетные строки, начиная с конца  */
}

Псевдокласс nth-of-type

Псевдокласс :nth-of-type позволяет выбрать дочерний элемент определенного типа по определенному номеру:


tr:nth-of-type(2) { 
	background-color: #bbb;
}

Аналогично работает псевдокласс nth-last-of-type, только теперь отсчет элементов идет с конца:


tr:nth-last-of-type(2n) { 
	background-color: #bbb;
}

:first-child и :last-child | WebReference

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

Для демонстрации воспользуемся следующим списком.

<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>

Все элементы <li> здесь равны между собой и имеют общего родителя <ul>. Таким образом, :first-child выберет первый пункт списка с текстом «Uno».

Селектор :first-child выбирает все первые элементы в каждой группе веб-страницы, что обычно не требуется. Для сокращения охвата к :first-child нужно добавить селектор элемента — p:first-child. Эту запись следует читать справа налево — сперва выбирается первый элемент, затем проверяется что это элемент <p>. Если первым элементом будет <p>, то к нему применяются стилевые правила; если первым оказывается другой элемент (не <p>), то стиль к нему не применяется.

Сложности с пониманием работы :first-child обычно возникают при чередовании разных элементов, как показано ниже.

<section>
  <p>Один</p>
  <div>Uno</div>
  <p>Два</p>
  <div>Dos</div>
  <p>Три</p>
  <div>Tres</div>
</section>

Следующий стиль сделает текст первого элемента внутри <section> зелёным («Один»). При этом мы не указываем какой это элемент, так что простая перестановка строк в HTML будет делать любую первую строку зелёной.

section > :first-child { color: green; }

Добавление div к селектору не даёт никакого результата — ни одна из строк не станет зелёной. Здесь берётся первый элемент и сравнивается, является ли он <div>. Поскольку первым элементом внутри <section> у нас идёт <p>, то стиль применяться не будет.

section > div:first-child { color: green; }

Заменив div на p получим первую строку зелёной, поскольку первым элементом у нас идёт именно <p>.

section > p:first-child { color: green; }

Аналогично :first-child работает и :last-child, только он определяет последний элемент в группе. К примеру, следующий стиль сделает зелёной строку с текстом «Tres», поскольку элемент <div> идёт последним.

section > div:last-child { color: green; }

Псевдоклассы :first-child и :last-child обычно применяются в списках и таблицах, где последовательно идут одни и те же элементы. В примере 1 между пунктами горизонтального списка добавляется вертикальная линия через свойство border-left. Чтобы убрать линию у первого пункта используем псевдокласс :first-child.

Пример 1. :first-child для списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>:first-child</title> <style> ul { background: #86328c; /* Цвет фона */ padding: 0; /* Обнуляем */ } li { display: inline-block; /* Выстраиваем по горизонтали */ color: #eedfac; /* Цвет текста */ padding: 10px; /* Поля вокруг текста */ border-left: 1px solid #f190ac; /* Линия слева */ } li:first-child { /* Для первого элемента */ border-left: none; /* убираем линию */ } </style> </head> <body> <ul> <li>Uno</li><li>Dos</li><li>Tres</li> </ul> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Список с вертикальными линиями

Аналогичный результат достигается и с помощью :last-child, только вместо линии слева надо сделать её справа через свойство border-right.

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

Рис. 2. Границы в таблице

К каждой ячейке добавляется белая линия справа и сверху, а также серая линия слева и снизу. :first-child и :last-child применяются для отмены линий у первой и последней ячеек в строке (пример 2).

Пример 2. Использование :last-child

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>:first-child</title> <style> table { background: #f7f7f7; /* Цвет фона */ width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячеек */ border: 1px solid #ccc; /* Параметры рамки */ } th, td { padding: 10px; /* Поля в ячейках */ } th { background: #e9e9e9; /* Цвет фона заголовка */ } th, td { border-left: 1px solid #ccc; border-right: 1px solid #fff; border-top: 1px solid #fff; border-bottom: 1px solid #ccc; } th:first-child, td:first-child { border-left: none; } th:last-child, td:last-child { border-right: none; } tr:last-child td { border-bottom: none; } </style> </head> <body> <table> <thead> <tr> <th>Значение</th> <th>Значение по умолчанию</th> <th>Описание</th> </tr> </thead> <tbody> <tr> <td>top</td> <td>Да</td> <td>Располагает заголовок по верхнему краю таблицы.</td> </tr> <tr> <td>bottom</td> <td>Нет</td> <td>Заголовок располагается под таблицей.</td> </tr> </tbody> </table> </body> </html>

Обратите внимание на селектор tr:last-child td — он позволяет обратиться к ячейкам последней строки в таблице и убрать у них линию снизу.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 12.03.2020

Редакторы: Влад Мержевич

Псевдокласс: nth-last-child | htmlbook.ru

Internet Explorer Хром Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.6+ 2.1+ 2.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

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

Значения

нечет
Все нечетные номера элементов.
даже
Все четные номера элементов.
число
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
выражение
Задается в виде an + b, где a и b целые числа, а n — счетчик, который автоматически принимает значения 0, 1, 2 …

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an.a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

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

В табл. 1 представлены некоторые выражения и ключевые слова, а также указаны какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса
Значение Номера элементов Описание
1 1 Последний элемент, является синонимом псевдокласса: last-child.
5 5 Пятый элемент с конца.
2н 2, 4, 6, 8, 10 Все четные элементы, даже аналог значения.
2н + 1 1, 3, 5, 7, 9 Все нечетные элементы, аналог значения нечетный.
3н + 2 2, 5, 8, 11, 14–
-н + 3 3, 2, 1–
5н-2 3, 8, 13, 18, 23–
даже 2, 4, 6, 8, 10 Все четные элементы.
нечет 1, 3, 5, 7, 9 Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

  

 
  
   nth-last-child 
  <стиль>
   Таблица {
    ширина: 100%; / * Ширина таблицы * /
    граница-коллапс: коллапс; / * Убираем двойные границы * /
    граница-интервал: 0; / * Расстояние между ячейками * /
   }
   td {
    граница: 1px solid # 333; / * Параметры рамки * /
    отступ: 3 пикселя; / * Поля в ячейках * /
    граница слева: 3px двойной # 333; / * Граница слева * /
   }
   td: nth-last-child (2n + 1) {
    фон: # f0f0f0; / * Цвет фона * /
   }
   td: nth-child (1) {
    граница: 1px solid # 333; / * Параметры рамки * /
    фон: #cfc; / * Цвет фона * /
   }
  
 
 
  <таблица>
   
     2134  2135 
    21362137  2138 
   
   
    Нефть16  34 
    6274  57 
   
   
    Золото4  69 
    7256  47 
   
   
    Дерево7  73 
    7934  86 
   
   
    Камни23  34 
    8853  103

В данном примере псевдокласса: nth-last-child используется для выделения всех нечётных колонок, начиная с последней (рис.1).

Рис. 1. Применение псевдокласса: nth-last-child к колонкам таблицы

.

Псевдокласс: последний ребенок | htmlbook.ru

Взаимодействие с другими людьми
Internet Explorer Хром Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Псевдокласс: last-child задает стилевое оформление последнего элемента своего родителя.

Синтаксис

элемент: last-child {…}

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

  

 
  
   последний ребенок 
  <стиль>
   .block {
    фон: # 7da7d9; / * Цвет фона * /
    цвет: #fff; / * Цвет текста * /
   }
   .block: first-child {
    отступ: 10 пикселей; / * Поля вокруг текста * /
   }
   .block: last-child {
    фон: # dda458 url (images / line.png) repeat-x; / * Параметры фона * /
    высота: 5 пикселей; / * Высота блока * /
   }
  
 
 
  

   

    При истечении понимания вышеизложенной информации вы
    имеете объективную возможность подать официальный запрос главному
    субординатору внутренней сети вселенной.

Результат показан на рис. 1. В данном примере псевдокласса: последний-ребенок известен определенным тегом

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

Рис. 1. Результат использования псевдокласса: последний ребенок

Не выкладывайте свой код напрямую в комментарии, он отображается некорректно.Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

.

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

CSS селекторы

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

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

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

CSS cинтаксис: 

 : nth-last-child (номер)  {
блок объявлений;
}

Версия CSS

CSS3

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

Псевдокласс : nth-last-child () позволяет выбрать не только чётные и нечетные значения, но и заданные по определенной формуле.Также допускается указывать просто цифру, используя при этом как отрицательные так и положительные значения.




 Псевдоклассы и псевдоэлементы 




    

  •  1 
    • 

  •  2 
    • 

  •  3 
    • 

  •  4 
    • 



    

  •  1 
    • 

  •  2 
    • 

  •  3 
    • 

  •  4 
    •
Пример использования псевдокласса: nth-last-child () в CSS.

Давайте разберем еще , очень важный пример , чтобы понять отличие : nth-last-child от: nth-last-of-type ().

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать первый абзац отлично от второго, установив задний фон цвета хаки (пойдя при этом очень хитрым путём …):

<статья>

 Первый параграф 


 Второй параграф

Мы стоим перед выбором, что использовать p: nth-last-child (2) или p: nth-last-of-type (2) .

Попробуем оба варианта:
  p: nth-child (2)  {
цвет фона: хаки;
}
  p: nth-of-type (2)  {
цвет фона: хаки;
}

Что не удивительно оба селектора работают для данной задачи и выделяют первый абзац.

Но в чём разница?

В данном примере псевдокласс : nth-last-child () выбирает этот элемент если это параграф и это второй элемент одного родителя ( считая от последнего дочернего элемента ) .

А: nth-last-of-type (), выбирает элемент если это второй параграф одного родителя ( считая последнего от дочернего элемента ) .

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

Для этого после основного содержания статьи мы размещаем ссылку — элемент на страницу.




 Псевдоклассы: nth-last-of-type () и: nth-last-child () 



<статья>

 Первый параграф 


 Второй параграф 

 Ссылка на ресурс источник
Пример использования псевдоклассов: nth-last-of-type () и: nth-last-child ().

Что в итоге у нас изменится?

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

Для данной оптимальным выбором является использование: nth-last-of-type () по объективным причинам:

  p: nth-last-of-type (2)  {
цвет фона: хаки;
}
CSS селекторы .

Псевдо-класс: nth-last-child (n) | CSS селектор

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

12.0+ 9.0+ 3.5+ 4.0+ 9.6+ 3.2+

Описание

Псевдо-класс: nth-last-child (n) применяет заданный стиль к элементу, который «n» дочернего элемента, заданного типа, считая от последнего элемента (независимо от его типа) своего родителя.
n — может быть ключевым словом или формулой.

Пример формулы ( an + b ):

 p: nth-last-child (3n + 0) {цвет: красный; }

a — представляет собой цикл, n — счетчик (начинается с 0) и b — это значение ущерба, указывающее с какого элемента, отсчитывая от последнего, начнется цикл.

Ключевые слова нечетные (нечетные) и четные (четные), могут быть использованы в соответствии с дочерними элементами, индекс которых составляет четное или нечетное значение (индекс последнего дочернего элемента начинается с 1):

 p: nth-last-child (нечетное) {color: # ff0000; }
Пример: 


  
    
     Пример 
    <стиль>
      p: nth-last-child (2) {
        красный цвет;
        цвет фона: желтый;
      }
    
  
  

    
 Первый абзац.

    
 Второй абзац. 

    
 Третий абзац. 

    
 
 Первый абзац. 
 
 Второй абзац.
Результат данного примера:

Первый абзац.

Второй абзац.

Третий абзац.

Первый абзац.

Второй абзац.

.

No related posts.

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *