クラス指定を適用させたい。

Question

前提・実現したいこと

cssの勉強を始めたばかりでprogateを利用しています。

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

下記の状態でcssにクラス名.contents-itemを指定すると4つ.contents-itemがある内の1番上のクラスにしか適用されません。
.contents-itemと指定して何故4つ全部ではなく一番上のcontents-itemにしか適用されないのか教えて下さい
初歩的ですみません。

該当のソースコード

      <div class="contents">

        <h3></h3>
        

        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
          <p>HTML & CSS</p>
          
        </div>
        

        <div class="contents-item"></div>
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
        <p>PHP</p>
        

        <div class="contents-item"></div>
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
        <p>Ruby</p>
        

        <div class="contents-item"></div>
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
        <p>Swift</p>
        
      </div>

.contents-item {
color: #000000;
}

試したこと

.contentsを指定すれば4つ全てに適用されましたが、何故contents-itemではダメなのか原因が知りたいです。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown

[misaki_t]

初めまして。ご指摘ありがとうございます。
マークダウンのcode機能を利用し編集致しました

Answer 1

二番目以降のdiv要素の閉じるタグ(</div>)の位置がおかしいと思います。

Comments

[misaki_t]

回答ありがとうございました^^確認＆把握出来ました！ありがとうございます