:last-child

ジャンプ先:
  1. 構文
  2. 例
  3. 仕様書
  4. ブラウザーの対応
  5. 関連情報

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

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

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

構文

:last-child

例

基本的な例

HTML

<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h2>This text isn't selected: it's not a `p`.</h2>
</div>

CSS

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

結果

リストのスタイル付け

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

CSS

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

結果

仕様書

仕様書 状態 備考
Selectors Level 4
:last-child の定義		 草案 選択する要素に親を必要としないようにした。
Selectors Level 3
:last-child の定義		 勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:last-childChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3.2WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
Matches elements with no parentChrome 完全対応 57Edge 未対応 なしFirefox 完全対応 52IE 未対応 なしOpera 完全対応 44Safari 未対応 なしWebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile 未対応 なしFirefox Android 完全対応 52Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報

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

タグ: 
このページの貢献者: mdnwebdocs-bot, mfuji09, ethertank
最終更新者: mdnwebdocs-bot,