nth-childがうまくいかない、と思っている人へ。(過去の自分を含む)

あなたがやりたいことは実は、「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;}

すると、

スクリーンショット 2015-12-10 17.30.36
こんな風に見え方を変えることができます。工夫をすれば奇数だけ、とか(3n-2)で3つ並びになったものの最初、とかを指定することができるんですねー。
非常に便利です。

ただ、うまくいかないなーって時、あるんですよ。

<div>
	<h3>タイトルが入ったら、あれ?</h3>
	<p>本日は晴天なり</p>
	<p>本日は晴天なり</p>
	<p>本日は晴天なり</p>
	<p>本日は晴天なり</p>
	<p>本日は晴天なり</p>
</div>

このように、HTMLを書き換えました。すると、

スクリーンショット 2015-12-10 17.34.32

こんな風に、2番目の段落が赤色になるんですね。なにこれバグなの、と思っていたんですが、これがnth-childの仕様です。
要素名を指定しても、その要素だけをカウントしてくれるわけじゃないんです。そりゃそうか。
それでも私、そういうものかー、ぐらいで流していたんですが、あるんですよ。ちゃんと調べればよかった。

そこで、登場するのが nth-of-type(n) です!

nth-of-type(n)
http://www.htmq.com/selector/nth-of-type.shtml

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

E:nth-child(n)の場合には、 種類に関係なく要素を数えて、n番目にE要素が来た場合にスタイル適用の対象になります。

一方、E:nth-of-type(n)の場合には、途中で別の種類の要素が入る場合にはそれを数えずに、 指定した種類の要素のみを数えてスタイル適用の対象が決定されます。

ちゃんと書いてあるのにね。詳しく調べるって大事ですね。書いた感じは下記の通り。

p:nth-of-type(3) {color: blue;}

わかりやすいように、こちらは青にしました。ということで、同じHTMLで下記の指定を追加すると。

スクリーンショット 2015-12-10 17.39.06

できました〜。これがやりたかったんだ!!

と、いうことで、nth-childがうまくいかないと思われる方は、ぜひ子要素の関係を確認しつつ、nth-of-typeで解決できないか検討してみてくださいませ。

参考にさせていただいたサイト
http://csspro.digitalskill.jp/チュートリアル/nth-childとnth-of-typeの違い/

擬似クラスについてはこちら
http://www.symmetric.co.jp/blog/archives/90

こちらも示唆的だったので合わせてお読みください。
擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話
http://weboook.blog22.fc2.com/blog-entry-370.html

CSSのカスケーディングの優先度(詳細度)など、もう結構書けるんだぜ、という方向けに、もうちょっと「ちゃんと」書くことを意識したい方には、こちらの本も良かったです。
http://learning.ccc-labo.net/2015/05/『web制作者のためのcssの教科書』/

このようにCSSでの「困った!」について、答えられる範囲で回答したしますので、コメントなどからお気軽にお問い合わせくださいませ。

コメントをどうぞ

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