Css last of type: :last-of-type — Веб-технологии для разработчиков

Содержание

:last-of-type — Веб-технологии для разработчиков

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

/* Выбирает <p>, являющийся последним элементом
   среди элементов своего типа среди своих соседей */
p:last-of-type {
  color: lime;
}

Примечание: В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.

Синтаксис

:last-of-type

Пример

Стилизация последнего параграфа

HTML

<h3>Заголовок</h3>
<p>Параграф 1</p>
<p>Параграф 2</p>

CSS

p:last-of-type {
  color: red;
  font-style: italic;
}

Результат

Вложенные элементы

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

HTML

<article>
  <div>Этот `div` первый.</div>
  <div>Этот <span>вложенный `span` является последним</span>!</div>
  <div>Этот <em>вложенный `em` первый</em>, а этот <em>вложенный `em` последний</em>!</div>
  <b>Этот `b` будет выбран!</b>
  <div>Это последний `div`!</div>
</article>

CSS

article :last-of-type {
  background-color: pink;
}

Результат

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

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

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`:last-of-type`	Chrome Полная поддержка 1	Edge Полная поддержка 12 Полная поддержка 12 Замечания Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.	Firefox Полная поддержка 3.5	IE Полная поддержка 9 Полная поддержка 9 Замечания Internet Explorer treats all unknown elements (such as custom elements) as the same element type.	Opera Полная поддержка 9.5	Safari Полная поддержка 3.2	WebView Android Полная поддержка 2	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 10.1	Safari iOS Полная поддержка 3.2	Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка: Полная поддержка
Смотрите замечания реализации.: Смотрите замечания реализации.

См. также

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

basicweb.ru

HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Функции
- Правила
- Flexbox генератор
- Grid генератор
- Учебник LESS
JavaScript
- Интерфейсы веб API
- Объект Array
- Объект Date
- Объект Function
- Объект Global
- Объект JSON
- Объект Math
- Объект Number
- Объект Object
- Объект RegExp
- Объект Promise
- Объект String
jQuery
- Селекторы
- События
- Методы DOM
- Перемещения
- Утилиты
- Эффекты
- AJAX
- Объект Callbacks
- Объект Deferred

HTML

HTML учебник
Справочник тегов
Атрибуты событий
Глобальные атрибуты
Мнемоники
Коды языков

HTML цвета
Тесты знаний

CSS

CSS учебник
Справочник свойств
CSS селекторы
CSS функции
CSS правила
Flexbox генератор
Grid генератор
LESS учебник

JavaScript

Интерфейсы веб API
Объект Array
Объект Date
Объект Function
Объект Global
Объект JSON
Объект Math^β
Объект Number
Объект Object
Объект Promise
Объект RegExp
Объект String

jQuery

jQuery селекторы
jQuery события
jQuery методы DOM
jQuery перемещения
jQuery утилиты

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

basicweb.ru

HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Функции
- Правила
- Flexbox генератор
- Grid генератор
- Учебник LESS
JavaScript
- Интерфейсы веб API
- Объект Array
- Объект Date
- Объект Function
- Объект Global
- Объект JSON
- Объект Math
- Объект Number
- Объект Object
- Объект RegExp
- Объект Promise
- Объект String
jQuery
- Селекторы
- События
- Методы DOM
- Перемещения
- Утилиты
- Эффекты
- AJAX
- Объект Callbacks
- Объект Deferred

HTML

HTML учебник
Справочник тегов
Атрибуты событий
Глобальные атрибуты
Мнемоники
Коды языков
HTML цвета
Тесты знаний

CSS

CSS учебник
Справочник свойств
CSS селекторы
CSS функции
CSS правила
Flexbox генератор
Grid генератор
LESS учебник

JavaScript

Интерфейсы веб API
Объект Array

:only-of-type — Веб-технологии для разработчиков

Описание

CSS псевдокласс :only-of-type выбирает такой элемент, который является единственным потомком такого типа.

/* Выбирает все <p>, которые являются */
/* единственным потомками типа <p> */
p:only-of-type {
  background-color: lime;
}

Синтаксис

:only-of-type

Пример

HTML

<main>
  <div>Я `div` №1.</div>
  <p>Я тут единственный `p` елемент.</p>
  <div>Я `div` №2.</div>
  <div>Я `div` №3.
    <i>Я единственный потомок типа `i`.</i>
    <em>Я `em` №1.</em>
    <em>Я `em` №2.</em>
  </div>
</main>

CSS

main :only-of-type { 
  color: red; 
}

Результат

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

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

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`:only-of-type`	Chrome Полная поддержка 1	Edge Полная поддержка 12 Полная поддержка 12 Замечания Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.	Firefox Полная поддержка 3.5	IE Полная поддержка 9 Полная поддержка 9 Замечания Internet Explorer treats all unknown elements (such as custom elements) as the same element type.	Opera Полная поддержка 9.5	Safari Полная поддержка 3.2	WebView Android Полная поддержка 2	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 10.1

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

Основное
HTML
CSS
Сайт

Статьи
Блог
Практикум
Форум

Самоучитель HTML
Справочник по HTML
XHTML
HTML5

Самоучитель CSS
Справочник по CSS
Рецепты CSS
CSS3

Вёрстка веб-страниц
Макеты
Веб-сервер

Справочник CSS

Как пользоваться справочником
!important
-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-linear-gradient
-moz-orient
-moz-radial-gradient
-moz-user-select
-ms-interpolation-mode
-ms-radial-gradient
-o-linear-gradient
-o-object-fit
-o-radial-gradient
-webkit-linear-gradient
-webkit-radial-gradient
-webkit-user-select
::-moz-placeholder
::-moz-selection
::-ms-browse
::-ms-check
::-ms-clear
::-ms-expand
::-ms-fill
::-ms-reveal
::-ms-value
::-webkit-input-placeholder
::after
::before
::first-letter
::first-line
::selection
:active
:after
:before
:checked
:default
:disabled
:empty
:enabled
:first-child
:first-letter
:first-line
:first-of-type
:focus
:hover
:indeterminate
:invalid
:lang
:last-child
:last-of-type
:link
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:read-only
:read-write
:required
:root
:target
:valid
:visited
@charset
@font-face
@import
@media
@page
an

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

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

1

2

3

4

1

2

3

4

Пример использования псевдокласса: nth-last-of-type () в CSS.
Давайте разберем еще очень важный пример , чтобы понять отличие : nth-last-of-type от: nth-last-child ().
Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать первый абзац отлично от второго, установив задний фон цвета хаки (пойдя при этом очень хитрым путём …):
<статья>
Первый параграф

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

Мы стоим перед выбором, что использовать p: nth-last-child (2) или p: nth-last-of-type (2) .
Попробуем оба варианта:
p: nth-last-child (2) { цвет фона: хаки; } p: nth-last-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 селекторы .
Псевдокласс: нестандартная | htmlbook.ru
Internet Explorer Хром Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.5+ 2.1+ 2.0+
Краткая информация
Версии CSS
CSS 1 CSS 2 CSS 2.1 CSS 3
Описание
Псевдокласс: единственный тип применяемого к дочернему элементу типа, только если он у родителя. Аналогичен использование: first-of-type: last-of-type или: nth-of-type (1): nth-last-of-type (1).
Синтаксис
элемент: однотипный {…}
Значения
Нет.
Пример
HTML5CSS3IECrOpSaFx
только тип <стиль> img: only-of-type { граница: сплошной красный 2px; / * Параметры рамки * / }
В примере псевдокласса: единственный тип применяемого к селектору img, в правилах стиля которого задаётся рамка красного цвета для картинок. Сама рамка добавляется к изображениям, которые у своих родителей (в данном случае это тег
) встречаются только один раз. В первой строке повторяется два изображения, поэтому псевдокласс не работает, во второй строке вставлено одно изображение, для него: only-of-type и работает.
Рис. 1. Применение псевдокласса: единственные к картинкам
.
: единственные — Веб-технологии для разработчиков
Описание
CSS псевдокласс : единственный тип выбирает такой элемент, который является единственным потомком такого типа.
/ * Выбирает все
, которые являются * / / * единственным потомками типа
* / p: only-of-type { цвет фона: салатовый; }
Синтаксис
: только тип
Пример
HTML
<основной>
Я `div` №1.

Я тут единственный `p` элемент.

Я `div` №2.

Я `div` №3. Я единственный потомок типа ʻi`. Я ʻem` №1. Я ʻem` №2.

CSS
main: only-of-type { красный цвет; }
Результат
Спецификации
Поддержка браузерами
Обновите данные совместимости на GitHub
Компьютеры Мобильные
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Internet
: только тип Chrome Полная поддержка 1 Кромка Полная поддержка 12
Полная поддержка 12
Замечания До версии Edge 16 Microsoft Edge обрабатывает все неизвестные элементы (например, настраиваемые элементы) как элементы одного типа.
Firefox Полная поддержка 3,5 IE Полная поддержка 9
Полная поддержка 9
Замечания Internet Explorer обрабатывает все неизвестные элементы (например, настраиваемые элементы) как элементы одного типа.
Опера Полная поддержка 9.5 Safari Полная поддержка 3.2 WebView Android Полная поддержка 2 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Опера Android Полная поддержка 10.1 Safari iOS Полная поддержка 3.2 Samsung Интернет Android Полная поддержка 1.0
Легенда
Полная поддержка
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.
Смотрите также
.
No related posts.

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