疑似クラス nth-child で特定の範囲の要素を指定する方法

今日はCSSの小ネタを紹介します。

CSSには「nth-child」という疑似クラスがあり、先頭からXX番目の要素を選択したいときなどに使われます。

ここで順序リストのHTMLをサンプルとしてとりあげます。

この時、CSSで以下のように書くと

2行目の「いいいいい」が赤くなります。

さらに、nth-childではこのような書き方もできます。

このように書くと、1行目から4行目のリストの文字色が青くなります。またさらに
「あああああ」から「えええええ」までが青くなります。

と書くことで、8行目以降のリストの文字色がオレンジになります。

「くくくくく」から「こここここ」までがオレンジになります。

さて、ここからが本題ですが、nth-childは疑似クラスなので、続けて書くことで、指定したクラスをすべて満たすようなセレクタを指定することができます。

例えば、こんな感じです。

nth-child(n+3)とnth-child(-n+7)が続けて指定してあります。このように書くことで、
3番目から7番目のリストの文字色を緑にする
というCSSを書くことができます。

20160116_001

こんな風になります。

以上です。nth-childのちょっとした使い方の紹介でした!

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

関連記事


この記事をかいた人

ドレッド Webクリエイター、ライター

Web制作やライティングなどインターネットを使って自由に暮らしているドレッドです。このブログではWeb制作やライティングでお役に立ちそうな知識から、ドレッドのプライベートな出来事まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

CSS | Posted on 2016/01/16 17:36

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です