ホームページ制作

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

記事内に商品プロモーションを含む場合があります

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

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

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

<ol>
	<li>あああああ</li>
	<li>いいいいい</li>
	<li>ううううう</li>
	<li>えええええ</li>
	<li>おおおおお</li>
	<li>かかかかか</li>
	<li>ききききき</li>
	<li>くくくくく</li>
	<li>けけけけけ</li>
	<li>こここここ</li>
</ol>

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

ol li:nth-child(2) {
	color:red;
}

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

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

ol li:nth-child(-n+4) {
    color:blue;
}

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

ol li:nth-child(n+8) {
	color:orange;
}

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

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

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

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

ol li:nth-child(n+3):nth-child(-n+7) {
	color:green;
}

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

20160116_001

こんな風になります。

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

===

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします!

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
らぐち
コレカラブログ管理人のらぐちです。コレカラウェブという屋号でフリーランスとして、Webライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。

COMMENT

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

CAPTCHA