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

2020年10月13日

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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コード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
ul li {
color: yellow;
}
ul li:last-child {
color: green;
}
ul li { color: yellow; } ul li:last-child { color: green; }
ul li {
  color: yellow;
}

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

 

CSS

Posted by arkgame