タグ: 擬似クラス

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

nth-childはCSS3で使える擬似クラスです。
http://www.htmq.com/selector/nth-child.shtml

E:nth-child(n)は、疑似クラスの一種で、 n番目の子となるE要素にスタイルを適用する際に使用します。

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

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

ここで、3行目だけ別の色にしたい、マージンを変えたい、ということがるときに、擬似クラスで下記のように書くことができます。

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

すると、