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 の定義
勧告 初回定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3.2WebView Android 完全対応 2Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 3.2Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連項目

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

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