セレクタの記載について

Question

「HTML+CSSの強化書」という参考書を購入し勉強中です。以下のようなコードが文書内に記載されているのですが、「.cardList__item + .cardList__item」のように同じクラス名を続けて指定するのはどのような理由があるのでしょうか。

    <div class="cardList">
      <section class="cardList__item">
        <a href="#" class="card">
          <h2 class="card__ttl">見出しテキスト</h2>
          <p class="card__txt">この文章はダミーです。</p>
        </a>
      </section>
      <section class="cardList__item">
        <a href="#" class="card">
          <h2 class="card__ttl">見出しテキスト</h2>
          <p class="card__txt">この文章はダミーです。</p>
        </a>
      </section>
      <section class="cardList__item">
        <a href="#" class="card">
          <h2 class="card__ttl">見出しテキスト</h2>
          <p class="card__txt">この文章はダミーです。</p>
        </a>
      </section>
    </div>

/*全てのデバイス向け＋SP用のスタイル*/
.cardList__item + .cardList__item {
  margin-top: 30px;
}
/*PC用のスタイル*/
@media screen and (min-width: 768px),print {
  .cardList {
    display: flex;
    justify-content: space-between;
  }
  .cardList__item {
    width: calc((100% - 60px) / 3);
  }
  .cardList__item + .cardList__item {
    margin-top: 0;
  }
}

インターネットなどで調べたのですがわからなかったため、こちらに質問させていただきました。
何卒よろしくお願いいたします。

Answer 1

• https://codepen.io/arcxor/pen/WNKaved
  • 直前の要素が .b である .b に色が付きます。
  • つまり、連続した .b のうち最初の要素を除く .b を対象とします。

最初の要素を除いて指定することで、要素の間にだけ margin-top を付けるような結果を得ることができます。単に .cardList__item としてしまうと最初の .cardList__item の要素にも margin-top が付いてしまいます。

<ul>
  <li class="b">b1</li>
  <li class="b">b2</li>
  <li class="b">b3</li>
  <li class="b">b4</li>
  <li class="b">b5</li>
</ul>

<ul>
  <li class="a">a1</li>
  <li class="a">a2</li>
  <li class="b">b1</li>
  <li class="b">b2</li>
  <li class="b">b3</li>
</ul>

<ul>
  <li class="a">a1</li>
  <li class="a">a2</li>
  <li class="b">b1</li>
  <li class="b">b2</li>
  <li class="a">a3</li>
  <li class="b">b3</li>  
</ul>

.b + .b {
  background: yellow;
}

Comments

[kame2]

わかりやすく説明していただき、有難うございます！よく理解できましたm(_ _)m

Answer 2

設計手法（命名規則）の１つです。
https://www.northdetail.co.jp/blog/1953/

Comments

[m.ts10806]

あぁ失礼、命名のことじゃなかったか。

[kame2]

命名規則についてよくわかっていなかったので、勉強になりました！ありがとうございますm(_ _)m

Answer 3

書いてのとおりです。

同じクラスのエレメントが連続している、あとの方にスタイルが適用されます。

Comments

[kame2]

ご回答頂きありがとうございます！