【CSS】nth-child()で要素の指定

2015/03/24 サイト制作, 技術系 投稿者:竹内

CSSの小技 その7
今回は「nth-child()で要素の指定」です。
今までのデモページで使用していましたが、nth-child()について もう少し掘り下げていきたいと思います。

用途

テーブルやナビゲーションや横並びなどで、何番目かの要素に特定の装飾をしたいときに、 今までですとclassを加えて装飾していましたが、nth-child()を使うことで便利に、かつ綺麗なソースで構築する事が出来ます。

実装方法

css07-01

今回は前回使ったナビゲーションで説明します。
ナビゲーションの順番によって要素の色を変更し、1番左の要素の横幅を半分にします。
ひとつ目の要素はfirst-childで指定することも出来ます。
CSSは下の方に記述しています。

HTML

CSS

奇数行、偶数行に指定する

css07-02

テーブルで奇数行と偶数行で色を変えたりすることが良くあります。
行がたくさんある場合やプログラム等で動的に行数が増える場合に全て設定するのは大変です。
そこでnth-child()の括弧内をodd(奇数行)、even(偶数行)とし、それぞれ装飾することが出来ます。

HTML

CSS

他にも

3番目以降全てを指定する場合:nth-child(n+3)
3番目までを指定する場合:nth-child(-n+3)
1番目と3の倍数(3,6,9)を指定する場合:nth-child(3n+1)
最後の要素を指定する場合:nth-last-child(1)
最後からn番目の要素を指定する場合:nth-last-child(n)
とnと数字の組み合わせでいろいろと指定することが出来ます。
classを細く設定してソースが汚くなってしまうこと無くマークアップ出来るのは技術者としても気持ちが良いです。

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)