2014/12

01

【CSS】色々と使える疑似クラス:nth-child()の実用例

要素の子要素ごとにスタイルを指定できるCSS3の疑似クラス:nth-child()は非常に便利ですよね。表組・カレンダーの装飾やレスポンシブ等で使用することも多いので実例を交えまとめてみました。
1

偶数・奇数にスタイルを適用する。

リストの偶数を指定したい場合は:nth-child(even)としてスタイルを指定します。
または数式では:nth-child(2n)(2つ飛ばして子要素に指定)と書きます。

css
.sampleA li{ 
	color:white;
	background-color:#CCC;
	text-align:center;
	display:inline-block;
	line-height:50px; 
	width: 50px;
	height: 50px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	}
.sampleA li:nth-child(even){
	background-color:#FFEE05;
	color:black;
	}
html
<div class="sampleA">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

リストの奇数を指定したい場合は:nth-child(odd)としてスタイルを指定します。
または数式では:nth-child(2n+1)(1番目の子要素を指定しその後2つおきにスタイルを指定)と書きます。

css
.sampleB li{ 
	color:white;
	background-color:#CCC;
	text-align:center;
	display:inline-block;
	line-height:50px; 
	width: 50px;
	height: 50px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	}
.sampleB li:nth-child(odd){
	background-color:#FFEE05;
	color:black;
	}
html
<div class="sampleB">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
2

任意の子要素にスタイルを適用する。

任意の子要素にスタイルを適用したい場合は以下のように指定します。
:nth-child(5) → 5番目のみスタイルを適用
:nth-child(3n) → 3の倍数のみスタイルを適用
:nth-child(3n+5) → 5番目の子要素から3つおきにスタイルを適用
:nth-child(n+4) → 4番目以降の子要素にスタイルを適用
:nth-child(-n+3) → 3番目までの子要素にスタイルを適用

5番目のみスタイルを適用

css
li:nth-child(5){
	background-color:#FFEE05;
	color:black;
	}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

4番目以降の子要素にスタイルを適用

css
li:nth-child(n+4){
	background-color:#FFEE05;
	color:black;
	}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3番目までの子要素にスタイルを適用

css
li:nth-child(-n+3){
	background-color:#FFEE05;
	color:black;
	}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
3

nth-childを使ったカレンダー

カレンダーのようなテーブルを使用したマトリクスでスタイルの指定をする場合も:nth-child()クラスを使うと比較的簡単に指定できます。
css
/*テーブルの指定*/
.caseA table{
    background-color:#CCC;
    width:60%;
    border-collapse:separate;
    border-spacing:1px;
    }
/*曜日の背景を指定*/
.caseA th{
    background-color:#EEE;
    }
/*土曜日(7番目)の背景・文字を指定*/
.caseA th:nth-child(7) {
    background:#e0f0fc;
    color:#0000ff;
    }
/*日曜日(1番目)の背景・文字を指定*/
.caseA th:nth-child(1) {
    background:#fce0e1;
    color:#ff0000;
    }
/*日付の背景を指定*/
.caseA td {
     background-color:#FFF;
     text-align: center;
     padding:10px;
     }
/*日付(土曜日)の背景・文字を指定*/
.caseA td:nth-child(7) {
    background:#f2f9fe;
    color:#0000ff;
    }
/*日付(日曜日)の背景・文字を指定*/
.caseA td:nth-child(1) {
    background:#fef2f3;
    color:#ff0000;
    }
/*日付(祭日:6段目の2列目)の背景・文字を指定*/
.caseA tr:nth-child(6) td:nth-child(2) {
    background:#fef2f3;
    color:#ff0000;
}
html
<div class="caseA">
<table>
  <tr>
  	<th>日</th>
    <th>月</th>
    <th>火</th>
    <th>水</th>
    <th>木</th>
    <th>金</th>
    <th>土</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
  <tr>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
    <td>22</td>
  </tr>
  <tr>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
    <td>29</td>
  </tr>
  <tr>
    <td>30</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</div>
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
4

レスポンシブで使えそうな例

デスクトップファーストでレスポンシブデザインを考えた時、ブラウザサイズが小さくなったときにリストを削りたいケースも出てくると思います。下の例はブラウザサイズが768px以下になった時にリストの5番目以降を非表示にする例です。
css
.caseB li{ 
	color:black;
	background-color:#FFEE05;
	text-align:center;
	display:inline-block;
	line-height:50px; 
	width: 50px;
	height: 50px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	}

@media only screen and (max-width: 768px) {
.caseB li:nth-child(n+5){
	display:none;
	}
}
html
<div class="caseB">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

用途によっては:first-child:last-child:nth-last-child(n):nth-of-type(n)などと使用した方が良いケースも多いですが今回は:nth-child(n)をまとめてみました。Nth-Child Visual Calculatorなる:nth-child(n)の計算機を公開してるサイトもありますので参考までに。。

Advertisement

Advertisement

最新記事
Facebook