タグ: css

あなたがやりたいことは実は、「:nth-of-type()」こっち、かもしれません。

:nth-child()はCSS3で使える擬似クラスです。

https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

:nth-child() は CSS の擬似クラスで、兄弟要素のグループの中での位置に基づいて選択します。

https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

兄弟要素とは、親を同じくする複数の子要素のことをいいます。

どのように使うかというと。
まず、下記のようなhtmlがあるとします。

<div>
	<p>本日は晴天なり</p>
	<p>本日は晴天なり</p>
	<p>本日は晴天なり</p>
	<p>本日は晴天なり</p>
	<p>本日は晴天なり</p>
</div>

ここで、3番目の段落だけスタイルを変えたい、ということがあるときに、擬似クラスで下記のように書くことができます。

p:nth-child(3) {color: red;}

すると、

(さらに…)