hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

n番目の要素を数えてCSSに指定

擬似クラスを使って、ある要素の中の任意のn番目の要素にのみ、

CSSを指定することができる。

 

◉基本

 ● :first-child

  ある要素内で最初の要素

 ● :last-child

  ある要素内で最後の要素

 

 ● :nth-child(n)

  ある要素内で最初からn番目の要素

    ● :nth-last-child(n)

  ある要素内で最後からn番目の要素

EX)2番を指定する。 :nth-child(2) ,  :nth-last-child(4)

 

 

 

 

◉ 変数を使用する

 ● :nth-child(2n)          ※ 2n は even も可 

        ある要素内での偶数番目の要素

 

 

 ● :nth-child(2n+1)  ※ 2n+1 は odd も可 

        ある要素内での奇数番目の要素

 

 

 

●まとめ

  • 何番目系擬似クラス一覧
    最初だけ :first-child
    最後だけ :last-child
    奇数 :nth-child(odd)
    偶数 :nth-child(even)
    3の倍数 :nth-child(3n)
    3の倍数+1 :nth-child(3n+1)

 

 

 

 

 

 

 

 

 

 

 

 

 

何番目系擬似クラス一覧
上から2番目だけ :nth-child(2)
下から3番目だけ :nth-last-child(3)
上から5番目まで全部 :nth-child(-n+5)
上から6番目以降全部 :nth-child(n+6)
下から5番目まで全部 :nth-last-child(-n+5)
下から6番目以降全部 :nth-last-child(n+6)