isara模写コーディングについて

Question

分からない点➔同じdiv内の画像の設定方法について

閲覧ありがとうございます。
私はiSARAの模写コーディングを行っております。

画像の中に文字と画像を埋め込みしており、
カラーのisaraの文字画像の高さは65pxで設定したいのですが、
親要素のdivの下のimgに設定した高さ310pxが、isaraの文字画像にも反映されてしまいました。

同じdiv内にあるimgの設定を別々にするにはどうしたらいいでしょうか。

※拡張機能で自動で枠の線と色がつくようにしています

  <div class="example">
    <img src="images/main.jpg" alt="メインヴィジュアル">
    <div class="text_area">
      <p>プログラミングで<br>
        人生の安定を手にいれよう</p>
      <div class="isara"><img src="images/isaralogolarge.png" alt="メインヴィジュアル画像"></div>
      <p>バンコクのノマドエンジニア育成講座iSara[イサラ]</p>
    </div>

.example img {
  min-height: 310px;
  width:100%;
  max-width: 100%;
  height: auto;
}

.isara img{
  height:65px;
  width: 237px;
}

Answer 1

.example img とすると.exampleの子孫要素のすべてのimgに適用されます。
.isara imgは孫要素になりますので min-height:310px; が適用されます。

子要素のみ適用させたい場合は.example > img とします。

子孫結合子 - CSS: カスケーディングスタイルシート | MDN

子結合子 - CSS: カスケーディングスタイルシート | MDN

Comments

[nakayamaakg]

とても分かりやすい説明ありがとうございました。