「CSS」last-childでリスト(ul、li)グループの最後の要素をスタイル付ける方法

2014年8月7日2020年10月13日

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

<ul>
  <li>TestData A001 項目が選択されない</li>
  <li>TestData B002　項目が選択されない</li>
  <li>TestData C
    <ul>
      <li>TestData C001</li>
      <li>TestData C002</li>
      <li>TestData C003 該当項目が選択されます</li>
    </ul>
  </li>
</ul>

CSSコード

ul li {
  color: yellow;
}

ul li:last-child {
  color: green;
}