Css last of type: Псевдокласс :last-of-type | htmlbook.ru – :last-of-type — Web technology for developers

Leave a Comment / Css / By /

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

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

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

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

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

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>last-of-type</title>
  <style>
   p:last-of-type:after {
    content: " ◄"; /* Добавляем символ в конце текста */
    color: #c00000; /* Цвет символа */
   }
  </style>
 </head>
 <body>
  <p>Этот старинный скандинавский напиток пришел к нам из древних времен и 
  воспет во многих песнях. Теперь вы самостоятельно можете приготовить 
  его и насладиться чудесным вкусом и ароматом легендарного нектара.</p>
  <p>...</p>
  <p>Осталось добавить хлива и хрольва, чтобы напиток был готов. 
  Подавать горячим.</p>
 </body>
</html>

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

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

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

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

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

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

Псевдокласс :last-of-type без указания селектора выберет последние элементы каждого типа (<h2>, <p>, <address>, <time>) и установит для них красный цвет текста.

article :last-of-type { color: red; }

При добавлении селектора к :last-of-type сперва выбираются указанные элементы, затем из них берётся последний элемент. Наличие других элементов (<h2> и <address>) и их порядок не учитываются.

article p:last-of-type { color: red; }

Здесь будет выбран последний абзац внутри <article> и выделен красным цветом.

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

Синтаксис 

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

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
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-of-type</title> <style> p:last-of-type::after { content: ‘ ◄’; /* Добавляем символ в конце текста */ color: #c00000; /* Цвет символа */ } </style> </head> <body> <p>Этот старинный скандинавский напиток пришёл к нам из древних времен и воспет во многих песнях. Теперь вы самостоятельно можете приготовить его и насладиться чудесным вкусом и ароматом легендарного нектара.</p> <p>…</p> <p>Осталось добавить хлива и хрольва, чтобы напиток был готов. Подавать горячим.</p> </body> </html>

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

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

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

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

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

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

Браузеры

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

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

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

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

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

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

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

Курс по вёрстке сайта на CSS Grid

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

CSS селекторы

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

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

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

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 от :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">Ссылка на ресурс источник</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 селекторы

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

CSS селекторы

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

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

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

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

CSS синтаксис:

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

Версия CSS

CSS3

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

Рассмотрим пример, в котором главное содержимое страницы заключено в блоки <div>, которые имеют стилевой класс .test, и Вам необходимо придать определённый стиль последним абзацам (элементы <p>) в этих блоках:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :last-of-type</title>
<style>
.test p:last-of-type
 
 { /* используем селектор потомков с псевдоклассом :last-of-type */
background-color: orange; /* устанавливаем цвет заднего фона */
font-weight: bold; /* устанавливаем жирное начертание текста */
}
</style>
</head>
	<body>
		<div class = "test">
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
			<span>Текст, внутри элемента span</span>
		</div>
		<hr>
		<div class = "test"> 
			<p>Абзац один</p>
			<p>Абзац два</p>
			<p>Абзац три</p>
			<span>Текст, внутри элемента span</span>
		</div>
	</body>
</html>

В этом примере с использованием псевдокласса :last-of-type мы стилизовали последние абзацы внутри каждого блока.

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

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

seodon.ru | CSS справочник — :last-of-type

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

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

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

Тип псевдокласса

Назначение: псевдоклассы.

Применяется: ко всем элементам.

Значения

Нет.

Синтаксис

селектор:last-of-type {  }

Пример CSS: использование :last-of-type

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS псевдокласс :last-of-type</title>
  <style type="text/css">
   span:last-of-type {
    color: blue; /* цвет текста последнего (среди своего типа) дочернего SPAN */
   }
  </style>
 </head>
 <body>
   <p>
    <span>Этот SPAN первый дочерний для P.</span>
    <span>Этот второй, но из SPAN он последняя дочка для P.</span>
    <em>
     <span>Этот SPAN первая дочка уже элемента EM.</span>
     <span>Этот SPAN последняя дочка EM.</span>
    </em>
   </p>
 </body>
</html>

Результат примера

Результат. Использование псевдокласса CSS :last-of-type.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и выше2.0 и вышеДо 3.63.6 и выше9.29.6 и выше3.1 и выше
Поддержка:НетДаДаНетДаНетДаДа

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

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

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

Описание

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

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

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

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

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

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      p:nth-last-of-type(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 и last-of-type в CSS

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

 

 

Чтобы успешно использовать псевдокласс last-child (последний потомок), нужно разобраться с потомками и родственными отношениями в CSS. Допустим, у нас есть следующая разметка:

<article>
  <div>
    <p>Along the shore the cloud waves break,</p>
    <p>The twin suns sink behind the lake,</p>
    <p>The shadows lengthen</p>
    <p>In Carcosa.</p>
  </div>
  <div>
    <p>Strange is the night where black stars rise,</p>
    <p>And strange moons circle through the skies,</p>
    <p>But stranger still is</p>
    <p>Lost Carcosa.</p>
  </div>
</article>

Если нам нужно задать отступ последним элементам абзацев в каждом блочном элементе, это можно сделать следующими способами: применить встроенные стили, что очень неудобно, их трудоемко поддерживать и изменять, на это нужно много времени, или использовать повторяющийся класс, это уже лучше, но по-прежнему создание, применение и изменение занимает много времени, или задать псевдокласс nth-child (энный потомок) или наиболее подходящий в этом случае вариант — last-child (последний потомок):

article p:last-child { text-indent: 2rem; }

И в результате получим следующее:

Как было сказано выше, можно создать этот эффект, используя псевдокласс nth-child:

article p:nth-child(4) {
  text-indent: 2rem;
}

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

Обратите внимание, что этот способ подходит, только если в каждом блоке после последнего абзаца нет других элементов. Если после последнего абзаца, например, следующим образом расположен горизонтальный разделитель:

…
    <p>In Carcosa.</p>
    <hr>
</div>

Тогда абзац не является последним потомком блока и правило не сработает. В таких случаях будет полезен псевдокласс last-of-type (последний этого типа).

Этот псевдокласс находит последнее упоминание этого типа элемента и устанавливает ему указанные свойства:

article p:last-of-type { text-indent: 2rem; }

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

Хороший пример использования псевдокласса last-of-type — удаление визуальных эффектов, которые применяются ко всем элементам, у последнего элемента. Например, для меню:

<nav>
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Products</a>
</nav>

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

nav a { border-right: 1px solid #000; }

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

nav a { border-right: 1px solid #000; }
nav a:last-child { border-right: none; }

Еще удобней записать это в одну строку кода CSS, объединив эти две записи с помощью отрицающего псевдокласса:

nav a:not(:last-child) { border-right: 1px solid #000; }

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

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

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