cssでのdiv class=""タグの処理方法

Question

前提・実現したいこと

サイトを製作中ですが、基本的な事でつまづいてしまいました。

<div></div>で一つのまとまりだと思っていたので、cssで.logoを選択した際はclass="logo"の中のimgに処理がなされるものだと思っていましたが、imgには全く反応されず、<button class="bunner-btn">Explore More</button>の方に処理されました。何故でしょうか。class="logo"を選択したのに何故class="bunner-btn"の方に処理がなされるのでしょうか？教えていただきたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

(ここからhtml)

<div class="container"> <div class="banner"> <div class="logo"> <a href="#"><img src="images/logo.png"></a> </div> <div class="btn-wrapper"> <button class="bunner-btn">Explore More</button> </div> </div>

(ここからcss)

• {
  margin: 0;
  padding: 0;

}

.container {
font-family: 'Monstserrat', sans-serif;
}

.banner {
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .8)), url(images/background.jpg) center no-repeat;
background-size: cover;
}
.logo {
height: 80px;
width: 80px;
}

試したこと

補足情報（FW/ツールのバージョンなど）

Answer 1

まず、記述されたソースコードだけを見ると閉じdivがひとつ足りません。
このままだと<div class="container">に対する</div>がないように思います。

CSSについては、

<div></div>で一つのまとまりだと思っていたので、cssで.logoを選択した際はclass="logo"の中のimgに処理がなされるものだと思っていましたが

とありますが、<div>～</div>でひとつのまとまり、という認識は間違っていません。
しかしCSSで指定している…

.logo {
  height: 80px;
  width: 80px;
}

は、logoクラスを持つ要素に対してのみ適用するという意味になります。
従って、<div class="logo">～</div>の中に含まれる子要素や孫要素に関しては適用されません。
子要素…今回の場合は<img>に対してこのCSSを適用したければ、次のように書くと適用されます。

パターン①　HTML側を変える

現在<div class="logo">としているものを直接<img>に付け替えてやれば正常に動きます。

<div class="container">
  <div class="banner">
    <div> <!--ここのclassを外してimgタグに付け替える-->
      <a href="#"><img class="logo" src="images/logo.png"></a>
    </div>
    <div class="btn-wrapper">
      <button class="bunner-btn">Explore  More</button>
    </div>
  </div>
</div> <!--この閉じタグは追加したものです-->

パターン②　CSS側を変える

こちらはHTMLコードはそのままにCSSだけを変更します。

.logo img {
  height: 80px;
  width: 80px;
}

このように記述した場合は、logoクラスを持つ要素の子以下のimg要素に対して適用する、
という書き方になります。

先に回答をしている方の紹介しているサイト様にいろいろな書き方が書いてあると思いますので、
そちらもご参考頂きながらご確認いただければと思います。

ちなみに、このソースコードをそのままコピペしてみましたが

<button class="bunner-btn">Explore More</button>

こちらにlogoのCSSが適用されることはありませんでした。
buttonタグのサイズは文字数、文字の大きさによって自動的に調整されるので
その都合でそれらしく見えたのではないでしょうか……。

Comments

[maruchan20]

とてもご丁寧にご回答いただきありがとうございました！phiar_poetさんのおかげで不明点が解決しました、、！すごく納得できました。ありがとうございました(^^)

Answer 2

このような場合何に対してそのスタイルを明確化する必要があります。

【CSS】隣接セレクタ 直下セレクタ 間接セレクタの違いをわかりやすく解説！

class指定を簡略化したい場合であれば上記URLのような表記方法がございます。

Comments

[maruchan20]

回答いただきありがとうございます！URLとても参考になりました。