読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

CSSやjQueryで擬似クラス:first-childや:nth-childが効かないときに確認しておきたいこと

Web制作 jQuery CSS
スポンサーリンク

前回関連記事に関する記事を書いたのですが、その際CSSとjQueryでのfirst-childに関して勘違いをしていたので、メモです。

a:first-childの勘違い

完全に勘違いだったのですが、結局この原因を見つけるのに2時間くらいかかってしまって^^;本当に原因をしったときはマジか!って思いでした。

どういうものかと言うと、例えば下の図の最初のカテゴリのみを取得したくて、

f:id:ftmaccho:20151113182840p:plain

HTML構造はこんな感じになっているので

<div class="categories">
    <i class="blogicon-folder"></i>
    <a href="">デモ</a>
    <a href="">デモやん</a>
</div>

「デモ」の文字は「categories」クラスの下の「a」タグの1つ目だなと思って下のようにCSSを書きました。

.categories a:first-child{
    color: red;
}

しかし全く反応せず…。

f:id:ftmaccho:20151113183455p:plain

ちゃんと1つ目の「a」で書いたのになんで??って思って悩んでいたのですが、こうしたらできました。

.categories a:nth-child(2){
    color: red;
}

f:id:ftmaccho:20151113183643p:plain

えっ、2番目って思ったのですが、どうやら

.categories a:first-child

は「categories」クラスの下の「a」の1つ目

ではなく、

「categories」クラスの最初の位置にある「a」

ということだったみたいです。

簡単に言っちゃうと「categories」クラスの「first-child」なのは「a」タグではなく、その前にある「i」タグだよということ。

f:id:ftmaccho:20151113184232p:plain

「a:first-child」なんだから「a」タグの1番目って解釈されると思っていたのですが…、違ったみたいです。

jQueryでの取得も全く同じです。

まとめ

ということで、あっさり小ネタのようなものでした。

jQueryだったので他の部分でミスがあると思って、見つけるのにすごく時間をかけてしまいました^^;