:last-of-type¶
Псевдокласс :last-of-type
находит последнего потомка с заданным тегом в списке детей родительского элемента.
Псевдоклассы
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Синтаксис¶
/* Selects any <p> that is the last element
of its type among its siblings */
p:last-of-type {
color: lime;
}
Спецификации¶
Описание и примеры¶
Пример 1¶
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
p:last-of-type {
color: red;
font-style: italic;
}
Пример 2¶
<article>
<div>This `div` is first.</div>
<div>This <span>nested `span` is last</span>!</div>
<div>
This <em>nested `em` is first</em>, but this
<em>nested `em` is last</em>!
</div>
<b>This `b` qualifies!</b>
<div>This is the final `div`!</div>
</article>
article :last-of-type {
background-color: pink;
}