擬似クラス「:last-child」と「:first-child」の使い方

この記事では、擬似クラス「:last-child」と「:first-child」の使い方について説明していきます。
前回の記事が元ネタになっているので、まずはここからご参照ください。

2020年8月1日擬似要素「::after」の使い方

擬似クラス「:last-child」の使い方
擬似クラス「:first-child」の使い方
完成版ソース

目次へ

擬似クラス「:last-child」の使い方

以下は、最後の要素だけ「>」を付けない。という処理と、最後の要素だけ背景を黄色にする。という処理を行っています。

See the Pen
last-child by shiakisudev (@shiakisu)
on CodePen.

最後の要素だけ「>」を付けない。というのはCSSの以下の部分で実現しています。

CSS

li:last-child::after{
  content: none;
}

また、最後の要素だけ背景を黄色にする。というのはCSSの以下の部分で実現しています。

CSS

li:last-child{
  background-color:yellow;
}

擬似クラス「:first-child」の使い方

使い方は同じです。以下は、最初の要素だけ、背景色を赤色にしています。

See the Pen
first-child by shiakisudev (@shiakisu)
on CodePen.

完成版ソース

ソースを以下に抜粋しておきます。

HTML

<ul>
  <li>大項目</li>
  <li>中項目</li>
  <li>小項目</li>
</ul>

CSS

ul{
  list-style:none;
  padding-left:0px;
}

li{
    display:inline;
}

li::after{
  padding-left:10px;
  content: ">";
}

li:last-child::after{
  content: none;
}

li:last-child{
  background-color:yellow;
}

li:first-child{
  background-color:red;
}