nth-of-typeの挙動がおかしい

Question

■問題：nth-of-typeが指定通りの動きをしない
■現状：nth-of-type(even)を指定しても、効かず、すべて１番目の要素として計算される。
■コード：

●HTML

<section class="p-shop-category container"> <div class="p-shop-category__header"> <div class="p-shop-category__inner"> <span class="p-shop-category__list-ttl">SHOP No.</span> <div class="p-shop-category__list-number">001-010 <div class="p-accordion__toggle-circle-icon"> <div class="c-icon__circle c-icon__circle--accent-color u-pos-a arrow-up"> <span class="c-icon__circle--arrow-up"></span> </div> <div class="c-icon__circle c-icon__circle--accent-color u-pos-a arrow-down"> <span class="c-icon__circle--arrow-down "></span> </div> </div> </div> </div><!-- .p-shop-category__inner --> </div><!-- .p-shop-category__header --> <div class="p-shop-category__list"> <div class="p-shop-category__list-item"> <div class="p-shop-category__inner"> <div class="p-shop-category__shop-desc"> <img class="p-shop-category__logo" src="assets/images/item1.png" alt="shop-logo"> <div class="p-shop-category__shop-name-box"> <p class="p-shop-category__cat-no">001</p><!-- .p-shop-category__cat-no --> <p class="p-shop-category__shop-name">item1</p> </div><!-- .p-shop-category__shop-name-box --> </div><!-- .p-shop-category__shop-desc --> <div class="p-accordion"> <div class="p-accordion__toggle-icon"> <i class="fas fa-caret-down fa-3x p-accordion__toggle-btn"></i> <i class="fas fa-caret-up fa-3x p-accordion__toggle-btn p-accordion__toggle-btn--end"></i> </div> </div> </div><!-- .p-shop-category__inner --> </div><!-- .p-shop-category__list-item --> <div class="p-shop-category__cont p-accordion__inner"> <div class="p-accordion__target-block"> <div class="p-accordion__cont-link-list"> <a href="#"><img src="assets/images/homepage.png" alt="ホームページ"></a> <a href="#"><img src="assets/images/blog.png" alt="ブログ"></a> <a href="#"><img src="assets/images/hotpapper-beauty.png" alt="ホットペッパービューティー"></a> <a href="#"><img src="assets/images/facebook.png" alt="フェイスブック"></a> <a href="#"><img src="assets/images/instagram.png" alt="インスタグラム"></a> <a href="#"><img src="assets/images/line.png" alt="ライン"></a> <a href="#"><img src="assets/images/tel.png" alt="電話番号"></a> <a href="#"><img src="assets/images/map.png" alt="マップ"></a> </div> </div> </div><!-- p-shop-category__cont p-accordion__inner --> </div><!-- .p-shop-category__list --> <div class="p-shop-category__header"> <div class="p-shop-category__inner"> <span class="p-shop-category__list-ttl">SHOP No.</span> <div class="p-shop-category__list-number">001-010 <div class="p-accordion__toggle-circle-icon"> <div class="c-icon__circle c-icon__circle--accent-color u-pos-a arrow-up"> <span class="c-icon__circle--arrow-up"></span> </div> <div class="c-icon__circle c-icon__circle--accent-color u-pos-a arrow-down"> <span class="c-icon__circle--arrow-down "></span> </div> </div> </div> </div><!-- .p-shop-category__inner --> </div><!-- .p-shop-category__header --> <div class="p-shop-category__list"> <div class="p-shop-category__list-item"> <div class="p-shop-category__inner"> <div class="p-shop-category__shop-desc"> <img class="p-shop-category__logo" src="assets/images/item1.png" alt="shop-logo"> <div class="p-shop-category__shop-name-box"> <p class="p-shop-category__cat-no">001</p><!-- .p-shop-category__cat-no --> <p class="p-shop-category__shop-name">風神</p> </div><!-- .p-shop-category__shop-name-box --> </div><!-- .p-shop-category__shop-desc --> <div class="p-accordion"> <div class="p-accordion__toggle-icon"> <i class="fas fa-caret-down fa-3x p-accordion__toggle-btn"></i> <i class="fas fa-caret-up fa-3x p-accordion__toggle-btn p-accordion__toggle-btn--end"></i> </div> </div> </div><!-- .p-shop-category__inner --> </div><!-- .p-shop-category__list-item --> <div class="p-shop-category__cont p-accordion__inner"> <div class="p-accordion__target-block"> <div class="p-accordion__cont-link-list"> <a href="#"><img src="assets/images/homepage.png" alt="ホームページ"></a> <a href="#"><img src="assets/images/blog.png" alt="ブログ"></a> <a href="#"><img src="assets/images/hotpapper-beauty.png" alt="ホットペッパービューティー"></a> <a href="#"><img src="assets/images/facebook.png" alt="フェイスブック"></a> <a href="#"><img src="assets/images/instagram.png" alt="インスタグラム"></a> <a href="#"><img src="assets/images/line.png" alt="ライン"></a> <a href="#"><img src="assets/images/tel.png" alt="電話番号"></a> <a href="#"><img src="assets/images/map.png" alt="マップ"></a> </div> </div> </div><!-- p-shop-category__cont p-accordion__inner --> </div><!-- .p-shop-category__list -->

●CSS
.p-shop-category {
&__header {
background: $accent-color;
color: #fff;
font-size: 3.6rem;
padding: 2.5rem 0;
}
&__header:nth-of-type(odd) {
background: $base-color;
}
}

Comments

[Takumiboo]

これCSSではなくてSass(SCSS)ですよね？

[shimuken0104]

失礼しました。SCSSです。
自己解決できました。回覧頂きありがとうございます。

[maisumakun]

アンダーバーがMarkdownとみなされてしまって、正しいクラスが表示されていません。HTMLやCSSをコードブロックに入れてください。

Answer 1

p-shop-category__list-wrapperの入れ子としてp-shop-category__header要素を設置する。

そして、SCSSに
&__list-wrapper:nth-of-type(even) > &__header {
background: $base-color;
}

で無事動作。