CSS псевдокласс :nth-last-of-type()css3

CSS селекторы

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

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

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

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
:nth-last-of-type()css34.03.59.63.29.012.0

CSS синтаксис:

:nth-last-of-type(число) {
блок объявлений;
}

Версия CSS

CSS3

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

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

<!DOCTYPE html>
<html>
<head>
<title>Псевдоклассы и псевдоэлементы</title>
<style type = "text/css"> 
td:nth-last-of-type(4) {
background-color: orange;
}
td:nth-last-of-type(2) {
background-color: lime;
}
td:nth-last-of-type(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-of-type() в CSS.
Пример использования псевдокласса :nth-last-of-type() в CSS.

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

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

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

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

Попробуем оба варианта:
p:nth-last-child(2)  {
background-color: khaki;
}
p:nth-last-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">Ссылка на ресурс источник</h2>
</article>
</body>
</html>
Пример использования псевдоклассов :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)  {
background-color: khaki;
}
CSS селекторы