• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

CSSセレクタまとめ 擬似クラス編

投稿者アイコン

2018/04/06

書いた人:
rurippa!
カテゴリ:
CSS   Web制作
890 views

tableやリストなど、様々なところで使えて便利ですよね。 ふと忘れてしまう事もあるかもしれませんので、、参考にして見てください♪

CSSセレクタまとめ 擬似クラス編


今回は擬似クラスの1つ、nth-childやnth-last-childのサンプルを紹介していきます。
tableやリストなど、様々なところで使えて便利ですよね。
ふと忘れてしまう事もあるかもしれませんので、、参考にして見てください♪

目次

準備

サンプルを使用する際は、下記のようなリストを用意して、適用してください。
見た目などは、cssを用意してご自由に設定してください。(※CSSリセット済み)

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
    


1.最初(最後)

:first-child

一番最初の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

    ul li:first-child{
      background-color: skyblue;
    }
    


:last-child

一番最後の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    ul li:last-child{
      background-color: skyblue;
    }


2.最初(最後)からn番目

:nth-child(3)

3番目の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    ul li:nth-child(3){
      background-color: pink;
    }
    


:nth-last-child(3)

最後から3番目の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    ul li:nth-last-child(3){
      background-color: pink;
    }
    


3.偶数、奇数

:nth-child(even)

偶数番目の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    ul li:nth-child(even){
      background-color: skyblue;
    }
    


:nth-child(odd)

奇数番目の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
      ul li:nth-child(odd){
        background-color: skyblue;
      }
      


4.最初(最後)からnの倍数

:nth-child(3n)

3の倍数の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    ul li:nth-child(3n){
      background-color: pink;
    }
    


:nth-last-child(3n)

最後から3の倍数の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    ul li:nth-last-child(3n){
      background-color: pink;
    }
    


5.最初(最後)から、nの倍数

:nth-child(2n+1)

1番目の子要素を選択し、その後は2の倍数の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    ul li:nth-child(2n+1){
      background-color: skyblue;
    }
    


:nth-last-child(2n+1)

最後にある子要素を選択し、その後は2の倍数の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

      ul li:nth-last-child(2n+1){
        background-color: skyblue;
      }
    


6.最初(最後)からn番目以降(以前)

:nth-child(n+3)

3番目以降の要素を指定します。(n+3)は、0+3=3、1+3=4、2+3=5…となっています。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    ul li:nth-child(n+3){
      background-color: pink;
    }
    


:nth-child(-n+3)

3番目以前の要素を指定します。(-n+3)は、-1+3=2、-2+3=1、-3+3=0、…となっています。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    ul li:nth-child(-n+3){
      background-color: pink;
    }
    


:nth-last-child(-n+3)

最後から3番目以前の要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
      ul li:nth-last-child(n+3){
        background-color: pink;
      }
      


:nth-last-child(-n+3)

最後から3番目までの要素を指定します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

        ul li:nth-last-child(-n+3){
          background-color: pink;
        }

      



この記事を読んだ人はこんな記事も読んでいます

<

>