今回はHTMLのliタグで作成したリストの○番目の項目のみ色を変えるなど、好きな位置のみにCSSを効かせる実用的な方法を紹介します。
今回紹介する方法を使用すれば以下の様にリストで作ったメニューなどで、2の倍数番目のリストのみ色を変えるといったことが可能になります。
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
HTML
<ul class="listdesign" style="padding: 0px;">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>CSS
.listdesign {
position: relative;
width: 70%;
margin: 0 auto;
}
.listdesign li {
line-height: 1.5;
padding: 0.5em 0.5em 0.5em 1.7em;
list-style-type: none;
background: -webkit-linear-gradient(top, skyblue 0%, #5aade6 100%);
background: linear-gradient(to bottom, skyblue 0%, #5aade6 100%);
color: #fff;
}
.listdesign li:nth-child(2n){
background: -webkit-linear-gradient(top, #0aa81a 0%, #75d17e 100%);
background: linear-gradient(to bottom, #0aa81a 0%, #75d17e 100%);
}
.listdesign li:before {
font-family: "Font Awesome 5 Free";
content: "\f138";
position: absolute;
left : 0.5em;
color: white;
}- 任意の位置のリストの色を変えたい
- スマホ時に○番目以降を非表示にしたい
- 偶数番号のみにスタイルを適応させたい
liタグの好きな位置(○番目のみ)にCSSを適応させる方法
liタグの好きな位置にCSSを適応させるには以下の擬似クラスを使用します。
| セレクタ:nth-child(xn+y) | 親要素のn番目 |
nth-childを使うと任意の位置に対しての要素を指定できます。
nth-childは○番目のみ、一定間隔などの指定が可能です。1行間隔で背景色を変えたい場合や最後の2つのみ非表示にしたいなどの指定が可能です。
対象の要素に毎回クラス名を記述する必要がなくなりコードがスッキリして簡潔にまとめることができます。
(xn+y)の部分はセレクタ（親要素）に対して何番目にあたるのかを指定します。
例えば、親要素:nth-child(2)なら親要素内の2番目です。
実際の使い方は以下のとおりです。
- 1番上のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
- 5番目のリスト
- 6番目のリスト
HTML
<ul class="testlist1">
<li>1番上のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li>
<li>6番目のリスト</li>
</ul>CSS
.testlist1 li:nth-child(3) {
color:red;
}.testlist1が親要素で、li:nth-child(3)で子要素のliの3番目にのみスタイルが効く様になっています。
nth-childのいろんな使い方
nth-childの擬似クラスの値は数字以外にもいくつか使えるものがあります。
以下でそれぞれを解説します。
| (2) | 親要素内の2番目の子要素に適応 |
| (2n) | 親要素内の2の倍数番目の子要素に適応 |
| (2n+1) | 親要素内の2の倍数+1（奇数）番目の子要素に適応 |
| (n+3) | 親要素内の3番目以降の子要素に適応 |
| (-n+3) | 親要素内の3番目以前の子要素に適応 |
| even | 親要素内の偶数に適応 |
| odd | 親要素内の奇数に適応 |
nth-child(3)
親要素内の3番目の子要素に適応
HTML
- 1番上のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
- 5番目のリスト
- 6番目のリスト
<ul class="testlist1">
<li>1番上のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li>
<li>6番目のリスト</li>
</ul>CSS
.testlist1 li:nth-child(3) {
color:red;
}nth-child(3n)
親要素内の3の倍数の子要素に適応
HTML
- 1番上のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
- 5番目のリスト
- 6番目のリスト
<ul class="testlist2">
<li>1番上のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li>
<li>6番目のリスト</li>
</ul>CSS
.testlist2 li:nth-child(3) {
color:red;
}nth-child(3n+1)
親要素内の3の倍数+1の子要素に適応
HTML
- 1番上のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
- 5番目のリスト
- 6番目のリスト
<ul class="testlist3">
<li>1番上のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li>
<li>6番目のリスト</li>
</ul>CSS
.testlist3 li:nth-child(3n+1) {
color:red;
}nth-child(n+3)
親要素内の3番目以降に適応
HTML
- 1番上のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
- 5番目のリスト
- 6番目のリスト
<ul class="testlist4">
<li>1番上のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li>
<li>6番目のリスト</li>
</ul>CSS
.testlist4 li:nth-child(n+3) {
color:red;
}nth-child(-n+3)
親要素内の3番目以前に適応
HTML
- 1番上のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
- 5番目のリスト
- 6番目のリスト
<ul class="testlist5">
<li>1番上のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li>
<li>6番目のリスト</li>
</ul>CSS
.testlist5 li:nth-child(-n+3) {
color:red;
}nth-child(even)
親要素内の偶数番目以前に適応
HTML
- 1番上のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
- 5番目のリスト
- 6番目のリスト
<ul class="testlist6">
<li>1番上のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li>
<li>6番目のリスト</li>
</ul>CSS
.testlist6 li:nth-child(even) {
color:red;
}nth-child(odd)
親要素内の奇数番目以前に適応
HTML
- 1番上のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
- 5番目のリスト
- 6番目のリスト
<ul class="testlist7">
<li>1番上のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
<li>5番目のリスト</li>
<li>6番目のリスト</li>
</ul>CSS
.testlist7 li:nth-child(odd) {
color:red;
}nth-childは、レスポンシブサイトのPCとSPのレイアウトが切り替わる際に、スマホ時で気になる部分を、セレクタ:nth-child(n+7) {display:none;)などで非表示にするなどの使い方も出来ます。
以上がliタグの好きな位置(○番目のみ)にCSSを適応させる方法でした。
少しでも参考になったら幸いです。
