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

Webデザイン | CSS

2014/12/01 2023/01/23

偶数・奇数にスタイルを適用する。
任意の子要素にスタイルを適用する。
nth-childを使ったカレンダー
レスポンシブで使えそうな例

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

リストの偶数を指定したい場合は: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>

リストの奇数を指定したい場合は: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>

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

任意の子要素にスタイルを適用したい場合は以下のように指定します。 :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;
	}

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

css

li:nth-child(n+4){
	background-color:#FFEE05;
	color:black;
	}

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

css

li:nth-child(-n+3){
	background-color:#FFEE05;
	color:black;
	}

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

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

デスクトップファーストでレスポンシブデザインを考えた時、ブラウザサイズが小さくなったときにリストを削りたいケースも出てくると思います。下の例はブラウザサイズが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>

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

Nth-Child Visual Calculator

＼ Webデザインに関するお役立ち情報を定期的に配信中／

Follow @webclips_jp