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

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

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

<ul>
  <li>List-Item A001項目が選択されます。</li>
  <li>List-Item B002　項目が選択されない</li>
  <li>List-Item C003
    <ul>
      <li>List-Item C001 当項目が選択されます。</li>
      <li>List-Item C002 項目が選択されない</li>
      <li>List-Item C003 項目が選択されない</li>
    </ul>
  </li>
</ul>

CSSコード

ul li {
  color: yellow;
}
ul li:first-child {
  color: green;
}