CODING

[CSS] リストの最初や最後だけなどに便利な擬似要素

投稿日:


どうも、べ〜やんです。

今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介します。





リスト一部だけ

リストの最初や最後だけなど任意のリストだけデザインを変えたい時などに便利なのが擬似クラスを使用する方法です。

例えばヘッダーのナビゲーションリストの最後のリストのみボーダーを付けないやマージンを変えたい時などに、そのリストだけにわざわざ別のクラスをつけなくても簡単にデザインを変えられるので便利です。

後からリストの項目が増えても対応できるので積極的に使っていきたいですね。

使用するHTML↓

<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ol>


最初だけ :first-child

:first-child最初だけ指定する。

See the Pen wvvyQRN by beeyan (@orientado) on CodePen.



最後だけ :last-child

:last-child最後だけ指定する。

See the Pen QWWQJYe by beeyan (@orientado) on CodePen.



上から何番目だけ :nth-child(x)

:nth-child(x)上から数えてx番目だけ指定する。

See the Pen RwwQqOJ by beeyan (@orientado) on CodePen.



下から何番目だけ :nth-last-child(x)

:nth-last-child(x)下から数えてx番目だけ指定する。

See the Pen Jjjpeqy by beeyan (@orientado) on CodePen.



奇数だけ :nth-child(odd)

:nth-child(odd)奇数だけ指定する。

See the Pen XWWZyvN by beeyan (@orientado) on CodePen.



偶数だけ :nth-child(even)

:nth-child(even)偶数だけ指定する。

See the Pen wvvyQVZ by beeyan (@orientado) on CodePen.



それ以外を指定 :not(擬似クラス)

:not(擬似クラス)擬似クラス以外を指定する。

See the Pen bGGLONP by beeyan (@orientado) on CodePen.



よく使う例

個人的によく使う使用例をいくつか紹介します。

See the Pen bGGLORN by beeyan (@orientado) on CodePen.



おわりに


今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介しました。

クラス名を考える手間が省けるし、リストが増減しても対応してくれるので便利ですね。



-CODING
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[HTML] リストの作り方ul・ol・liタグ

どうも、べ〜やんです。 今回はHTMLでリストや箇条書きをざっくり作る方法を紹介します。 リストとは ul・ol・liタグを使うとリストや箇条書きを作ることができます。 目次や手順、メニュー、スライド …

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …