CSS <その他リファレンス メモ> 言語 等 CSSHTML JavaScriptPython ライブラリ・プラットフォーム jQuerymicro:bit Xamarin ドキュメンテーション DoxygenJSDoc MarkdownSHFB XML ドキュメント コメント その他 各種資料 子サイト 簡易リファレンス・Tips サポート寄付 疑似クラス一覧 :first-child【先頭子要素】・:last-child【最終子要素】 ・:only-child【唯一の子要素】 疑似クラス :first-child【先頭子要素】疑似クラス:last-child【最終子要素】疑似クラス :only-child【唯一の子要素】疑似クラス メモ 外部リンク 構文 例 メモ子要素の疑似クラス 要素のカウントは兄弟要素を全て含む (:*-of-type【該当子要素】系は同じ要素の兄弟のみ) 関連 :first-of-type【先頭該当子要素】 :last-of-type【最終該当子要素】 :only-of-type【唯一の該当子要素】 要素については、HTML5 リファレンス メモ 参照 外部リンクCSS3 (英語) 6.6.5.6. :first-child pseudo-class 6.6.5.7. :last-child pseudo-class 6.6.5.10. :only-child pseudo-class CSS 2.2 (Working Draft) (英語) 5.11.1 :first-child pseudo-class CSS 2.1 (英語) 5.11.1 :first-child pseudo-class 構文構文説明E:first-child { スタイル定義 } 親要素の先頭子E要素に適用E:last-child { スタイル定義 } 親要素の最終子E要素に適用E:only-child { スタイル定義 } 親要素の唯一の子E要素に適用 例 <style> .first > li:first-child { color: red; background-color: lightgray; } .last > li:last-child { color: blue; background-color: lightgray; } .only > li:only-child { color: red; background-color: lightgray; } </style> <ul class="first"> <li>先頭 <li>中間 <li>最終 </ul> <ul class="last"> <li>先頭 <li>中間 <li>最終 </ul> <ul class="first last only"> <li>先頭 <li>中間 <li>最終 </ul> <ul class="only"> <li>唯一 </ul> 先頭 中間 最終 先頭 中間 最終 先頭 中間 最終 唯一 <style> table.ex { border-collapse: collapse; } table.ex th { border: 1px blue solid; background-color: lightblue; } table.ex td { border: 1px blue solid; } .first2 td:first-child { color: red; background-color: lightgray; } .last2 td:last-child { color: blue; background-color: lightgray; } .only2 td:only-child { color: white; background-color: blue; } </style> <table class="ex first2 last2 only2"> <tr><th>th<th>th<th>th<th>th<th>th</tr> <tr><th>th<td>td<td>td<td>td<th>th</tr> <tr><th>th<td>td<td>td<td>td<td>td</tr> <tr><td>td<td>td<td>td<td>td<th>th</tr> <tr><td>td<td>td<td>td<td>td<td>td</tr> <tr><th colspan="2">th<td colspan="3">td</tr> <tr><td colspan="5">only td</tr> </table> ththththththtdtdtdththtdtdtdtdtdtdtdtdthtdtdtdtdtdthtdonly td