first-childとかnth-last-child(x)とか

残業万歳！
眠い！∠( ﾟДﾟ)／気が付いたら6月だ！

cssで詰まったからメモメモφ(・ω・ )

疑似クラス:first-child系を用いた「絞り込み」と勘違い

何番目の要素, ってやつ

<div id ="parent">
<div class="child_node">1番目</div>
<h5>タイトル1</h5>
<div class="child_node">2番目</div>
<div class="child_node">3番目</div>
<h5>タイトル2</h5>
<div class="child_node">4番目</div>
<div class="child_node">5番目</div>
</div>

たとえばこんな構造だったとき. #parentの最初の要素を指定したい！なんて時に使えるのが疑似クラスの :first-child. 読んで字のごとく「最初の子」を指す. また, 逆に「最後の子」を指す :last-childなんてのも.

<style>
#parent{
    background-color: blue;
}

#parent div:first-child{
    background-color: red;
}

#parent div:last-child{
    background-color: red;
}
</style>

試しにこんなスタイルを当ててみる.

1番目

タイトル1

2番目

3番目

タイトル2

4番目

5番目

とまぁ色が変わっているのだが, 問題はここから. 「前から x番目の子」を指す :nth-child(x), 「後ろから x 番目の子」を指す :nth-last-child(x)など, 順番を指定し始めると始まる勘違い. たとえば, 「一番最後の h5を指定したい」, 「上から3番目の child_nodeを指定したい」と思った時に,

<style>
#parent .child_node:nth-child(3){
    background-color: green;
#parent h5:nth-last-child(1){
    background-color: green;
</style>

と正直に指定すると…

1番目

タイトル1

2番目

3番目

タイトル2

4番目

5番目

Σ('A`)
"2番目"に色がつくわh5に色はつかないわ散々なわけで. 原因は出力を見ればだいたいの想像はつくかと.
要するに

#parent .child_node:nth-child(3)

とは,
「id=parentの子の, class=child_nodeの中での3番目のもの」ではなく,
「id=parentの子の中で3番目の子で, かつclass=child_nodeなら」という,
ある意味では確かに「絞り込み」を行っているみたい('A`)ソリャネェヨ

なので結局, 「x番目の子」という, 構造が変わると効果がなくなる不安定な絞り込みには変わりないものだったりするorz.




日本語と英語の解釈の違いみたい(・д・`)