:notタグを適用させたい

Question

前提・実現したいこと

レスポンシブで画面が小さくなった時、サイドバーを消したいのですがロゴのみ表示したいのでimg画像にのみ、CSSを適用させたくないのですが:notが適用されません。どうすれば:notが適用されてロゴのみが表示されるでしょうか？

該当のソースコード

HTML
<div class="sidebar">
<div class="side-container">
<img class="sidelogo" src="logo.png" alt="店名">
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">MESSAGE</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">BRAND</a></li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">COMPANY</a></li>
</ul>

CSS
.sidebar img:not(.sidelogo){
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}

試したこと

スペースを空ける等

Comments

[gpsoft]

私の環境では、問題なく効いてるみたいですよ。
logo.pngが表示されます。
他のimg要素は表示されません。
なので、作戦としては間違ってなさそうです。

[dehi0923]

お返事ありがとうございます。再度チャレンジしてみてみます！

Answer 1

.sidebar img:not(.sidelogo)
だと.sidebarの子孫要素のimg要素で.sidelogo以外という意味です。
適用されているので、表示されています。

.sidelogo以外の要素を表示にしたいのなら、下記になります。
.sidebar *:not(.sidelogo)

ただし、これだと、.sidelogoの親要素の.side-container も非表示になってしまい、結局.sidelogoも表示されなくなります。

.side-container *:not(.sidelogo) とすれば、.sidelogoは表示されて、それ以外の要素(ul、li)が非表示になります。

そのHTML構造なら、下記でもいいのでは。

.side-container  ul {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}

Comments

[dehi0923]

お返事ありがとうございます。丁寧に説明して頂き、わかりやすくありがたいです！またよろしくお願いします！

Answer 2

:notが適用されません。

いえ、適用されているから画像がそのまま表示されているのではないでしょうか？

Comments

[dehi0923]

お返事ありがとうございます。再度確認してみます！
またよろしくお願いします。