aタグで囲んだときに内部のdivのnth-childがおかしくなる

Question

###困っていること

<div class="item">
   中身１
</div>
<div class="item">
   中身２
</div>
<div class="item">
   中身３
</div>

.item:nth-child(1) {
   color: red;
}

としたときは問題なく、１つ目の要素の文字だけ赤くなりますが、htmlを

<a>
<div class="item">
   中身１
</div>
</a>
<a>
<div class="item">
   中身２
</div>
</a>
<a>
<div class="item">
   中身３
</div>
</a>

と囲むと全ての文字が赤くなってしまいます。（つまり全てがnth-child(1)として扱われている）

なぜでしょうか？解決方法を教えていただけると幸いです。

Comments

[x_x]

解決方法とは？
どうしたいのでしょうか？

Answer 1

なぜでしょうか

全ての.itemがaの1つ目の要素だから。

*:nth-child(1) .item {
   color: red;
}

Answer 2

ご希望のことは下記でしょうか。

a:nth-child(1) .item {
   color: red;
}

:nth-child() - CSS: カスケーディングスタイルシート | MDN

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

後のHTMLでは、各.itemはいとこの関係になる。

Comments

[sodiumplus3]

nth-childを勘違いしていました。ありがとうございます。

Answer 3

nth-childをきっと誤解しています

Comments

[yambejp]

<style>
.item:nth-child(1) {
color: red;
}
</style>
<a>
<div>
中身1
</div>
<div class="item">
中身1-1
</div>
</a>
<a>
<div class="item">
中身2
</div>
</a>
<a>
<div class="item">
中身3
</div>
</a>

とすればわかりますが。
「itemクラスの1番目」ではなく
「1番目の要素のウチitemクラスを持つもの」という意味です。