css nth-child 子要素にまで反映される

Question

おこっていること

下記コードで偶数の要素にcssを適用させたいのですが、指定クラスの下にいくつかdivの子要素があるため、親要素(testがあるdiv)には反映されていないのですが子要素には反映されてしまいます。（伝わりにくかったらすみません）
notも試してみたのですが、今度は偶数要素に反映されなかったりでうまくいきません。
いい方法はありませんか？

.test :nth-child(even) {
   ...
 }

<div class="chat-line__message" data-a-target="chat-line-message" data-test-selector="chat-line-message" tabindex="0">
  <div class="tw-relative">
    <div data-test-selector="chat-message-highlight" class="chat-line__message-highlight tw-absolute tw-border-radius-medium"></div>
    <div class="chat-line__message-container tw-relative">
      <div class="">
        <div class="chat-line__no-background tw-inline">
          <div class="chat-line__username-container tw-inline-block"><span></span><span class="chat-line__username" role="button" tabindex="0"><span><span class="chat-author__display-name" data-a-target="chat-message-username" data-a-user="trtr326" data-test-selector="message-username" style="color: rgb(138, 43, 226);">aaa</span></span>
            </span>
          </div><span aria-hidden="true" data-test-selector="chat-message-separator">: </span><span class="text-fragment" data-a-target="chat-message-text">aaa</span></div>
      </div>
    </div>
    <div class="chat-line__reply-icon tw-absolute tw-border-radius-medium tw-c-background-base tw-elevation-1"><button class="ScCoreButton-sc-1qn4ixc-0 gqSiKD tw-button-icon tw-core-button" aria-label="クリックして返信" data-test-selector="chat-reply-button"><span class="tw-button-icon__icon"><div style="width: 2rem; height: 2rem;"><div class="ScIconLayout-sc-1bgeryd-0 kbOjdP tw-icon"><div class="ScAspectRatio-sc-1sw3lwy-1 dNNaBC tw-aspect"><div class="ScAspectSpacer-sc-1sw3lwy-0 gkBhyN"></div><svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="ScIconSVG-sc-1bgeryd-1 cMQeyU"><path d="M8.5 5.5L7 4L2 9L7 14L8.5 12.5L6 10H10C12.2091 10 14 11.7909 14 14V16H16V14C16 10.6863 13.3137 8 10 8H6L8.5 5.5Z"></path></svg></div></div></div></span></button></div>
  </div>
</div>

Comments

[maisumakun]

HTMLも提示していただければと思います。

[tetro]

外部サイトです。
これが親要素の一つです。

[maisumakun]

どこに適用したくて、どこに適用したくないのでしょうか？（質問文を読んでも判断できませんでした）

[tetro]

これが何十個かあって(リストのような感じ)、それの偶数列に適用させたいです
・適用させない
・適用させる
・適用させない
・適用させる
　　　・
　　　・　
　　　・
というような感じなのですが、適用させたくないところの親要素(chat-line__message)には反映されていないのですが、<div class="tw-relative">などの子要素には反映されている感じです。

[maisumakun]

.testのHTML要素はどこでしょうか？

[maisumakun]

> これが何十個かあって(リストのような感じ)、

「これ」とはどれですか？

[tetro]

testは chat-line__message です。書き換え忘れてましたすみません。

これは<div class="chat-line__message" data-a-target="chat-line-message" data-test-selector="chat-line-message" tabindex="0">...<div>のことです。

Answer 1

.test :nth-child(even)は、「.testの子孫要素のうち、兄弟の中で偶数番目にあるもの」という意味です。

.test自体に適用するなら、.test:nth-child(even)となります。

Answer 2

.test :nth-child(even) {
   color: red;
 }

だと、子　孫　曾孫　・・・と子孫すべてに反映されます。

子孫結合子 - CSS: カスケーディングスタイルシート | MDN

直接の子だけに反映させたいのなら、

.test > :nth-child(even) {
   color: red;
 }

子結合子 - CSS: カスケーディングスタイルシート | MDN

Comments

[tetro]

ありがとうございます!!!
そんな書き方あがったんですね。
もっと勉強したいと思います！

[hatena19]

maisumakunさんの回答のように .test:nth-child(even) と空白をいれないと、兄弟要素内での偶数番目という意味になりますのでこれも合わせて覚えておくいいでしょう。