We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS:last-of-type 疑似クラスは、兄弟要素のグループの中でその種類の最後の要素を表します。

/* 兄弟要素の中で最後の <p> 要素をすべて選択 */
p:last-of-type {
  color: lime;
}

メモ: 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

構文

:last-of-type

最後の段落の整形

HTML

<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

CSS

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

結果

入れ子になった要素

この例は、どうやった入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、ユニバーサルセレクター (*) が暗黙に含まれています。

HTML

<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>

CSS

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

結果

仕様書

仕様書 策定状況 コメント
Selectors Level 4
:last-of-type の定義
草案 選択する要素に親を必要としないようにした。
Selectors Level 3
:last-of-type の定義
勧告 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり3.599.53.2
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応2.1 ? あり4103.2 ?

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank
最終更新者: mfuji09,