CSSでnot()が反映されない。

Question

wordpressのCSSをカスタムしているのですが、
特定のページにだけCSSを適用するためnot()を使用したのですが、
反映されなくて困っています。

アドバイスよろしくお願いします。

↓CSSでサムネイル画像を特定のカテゴリーページにだけ表示したい。
この場合は.category-22　のページのみサムネイルを表示したいので、ほかのページのサムネイルを
display:none;にしているのですが、すべてのページでサムネイルが消えてしまいうまく反映されません。

figure.entry-card-thumb.card-thumb.e-card-thumb :not(.category-22){
	display:none;
}

Answer 1

figure.entry-card-thumb.card-thumb.e-card-thumb :not(.category-22)というセレクタは、「（いくつかのクラスが付いた）figureの子孫要素のうち、.category-22でないもの」という意味になります。

figure自体のクラスを条件にしたい場合は、figure.entry-card-thumb.card-thumb.e-card-thumb:not(.category-22)とスペース無しで書いてください。

Comments

[spa]

回答いただきありがとうございます。
ご指摘の通りにしてみましたがうまくいきませんでした。

ほかのCSSが邪魔をしているかな？と思って削除してみましたが変わらずでした。
もしよろしければ代替の方法などありましたら教えてください。

[maisumakun]

category-22はfigureに付くクラス、というのは間違いないですか？

[spa]

CSSにあまり詳しくないのでわからないのですが、
CSSのパスはこのようになっております。

html body.archive.category.category-vtuber-v.category-22.logged-in.body.public-page.page-body.ff-hiragino.fz-16px.fw-300.hlt-center-logo-wrap.ect-entry-card-wrap.rect-entry-card-wrap.no-scrollable-sidebar.no-scrollable-main.sidebar-right.mblt-footer-mobile-buttons.author-guest.mobile-button-fmb.no-mobile-sidebar.no-sp-snippet.font-awesome-5.customize-partial-edit-shortcuts-shown div#container.container.cf div#content.content.cf div#content-in.content-in.wrap main#main.main div#list.list.ect-entry-card.front-page-type-index a.entry-card-wrap.a-wrap.border-element.cf article#post-10907.post-10907.entry-card.e-card.cf.post.type-post.status-publish.format-standard.hentry.category-vtuber-v-post figure.entry-card-thumb.card-thumb.e-card-thumb

[spa]

HTMLは
<figure class="entry-card-thumb card-thumb e-card-thumb"></figure>
です。

[maisumakun]

bodyについている「category-22」を基準としたい、ということで間違いないですか？

[spa]

はい、そのようにしたいです。

[maisumakun]

でしたら、「body:not(.category-22) figure.entry-card-thumb.card-thumb.e-card-thumb」のようになります。

[spa]

ありがとうございます！何時間も悩んでいたのが解決しました。
感謝です。