CSS nth-of-type()について

Question

実現したいこと

クラス名（aaa-aaa-outer）の子要素（aaa-aaa-wrapper）３つのうち、２番目と３番目にCSSを当てたい。

発生している問題・分からないこと

予想しない箇所にも、CSSが適用されている状態。
いろいろと調べてみたが、いろいろとごちゃごちゃになってきた。

該当のソースコード

<div class="aaa-aaa-outer">
　<div class="aaa-aaa-wrapper">
　　<div class="aaa-aaa-inner">
　　　<div class="wp-block-column">
　　　　<figure class="wp-block-image size-large">・・・</figure>
　　　</div>
　　　<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">※何故かここにも適用されている。
　　　　<p class="font-zen-antique feature-second-title">テキスト</p>
　　　　<p>テキスト、テキスト、テキスト</p>
　　　</div>
　　</div>
　</div>
　<div class="aaa-aaa-wrapper">※適用したい箇所①
　　<div class="aaa-aaa-inner">
　　　<div class="wp-block-column">
　　　　<figure class="wp-block-image size-large">・・・</figure>
　　　</div>
　　　<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">※何故かここにも適用されている。
　　　　<p class="font-zen-antique feature-second-title">テキスト</p>
　　　　<p>テキスト、テキスト、テキスト</p>
　　　</div>
　　</div>
　</div>
　<div class="aaa-aaa-wrapper">※適用したい箇所③
　　<div class="aaa-aaa-inner">
　　　<div class="wp-block-column">
　　　　<figure class="wp-block-image size-large">・・・</figure>
　　　</div>
　　　<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">※何故かここにも適用されている。
　　　　<p class="font-zen-antique feature-second-title">テキスト</p>
　　　　<p>テキスト、テキスト、テキスト</p>
　　　</div>
　　</div>
　</div>
</div>

aaa-aaa-outer div:nth-of-type(n+2):nth-of-type(-n+3) {
    background-color: #000;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

aaa-aaa-outer div:nth-of-type(3) {background-color: #000;}
とすると、※適用したい箇所③のみにCSSが適用された。これはこれで理想通り。

aaa-aaa-outer div:nth-of-type(2) {background-color: #000;}
とすると、※適用したい箇所②と、”※何故かここにも適用されている。”の3か所に適用されてしまう。

aaa-aaa-outer div:nth-of-type(n+2) {background-color: #000;}
とすると、※上記の2つを足した状態となる。

補足

特になし

Comments

[maisumakun]

本当にその通りに書いていますか？

「aaa-aaa-outer」は<aaa-aaa-outer>というタグにヒットするもので、クラス名にはマッチしません。

Answer 1

selector div:nth-of-typeのように書くと、「selectorの子孫のうち、親要素の中でnth-of-typeの条件を満たすdiv」ということになります。

selector直下のdivに限定したいなら、selector > div（後略としてください。

Answer 2

「.aaa-aaa-outer」直下の「.aaa-aaa-wrapper」の内、2番目と3番目というしばりならofを利用ください

:nth-child(2 of .aaa-aaa-outer > .aaa-aaa-wrapper),
:nth-child(3 of .aaa-aaa-outer > .aaa-aaa-wrapper)
{
background-Color:yellow;
}
{{{

Answer 3

間違いの解説は省略します。

1番目だけ除外したいのであれば

.aaa-aaa-outer > .aaa-aaa-wrapper:not(:first-child) {}

でいいと思います。