質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

セレクタの記載について

kame2
kame2

総合スコア3

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

3回答

0グッド

0クリップ

256閲覧

投稿2023/01/31 11:09

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

HTML

1 <div class="cardList"> 2 <section class="cardList__item"> 3 <a href="#" class="card"> 4 <h2 class="card__ttl">見出しテキスト</h2> 5 <p class="card__txt">この文章はダミーです。</p> 6 </a> 7 </section> 8 <section class="cardList__item"> 9 <a href="#" class="card"> 10 <h2 class="card__ttl">見出しテキスト</h2> 11 <p class="card__txt">この文章はダミーです。</p> 12 </a> 13 </section> 14 <section class="cardList__item"> 15 <a href="#" class="card"> 16 <h2 class="card__ttl">見出しテキスト</h2> 17 <p class="card__txt">この文章はダミーです。</p> 18 </a> 19 </section> 20 </div>

CSS

1/*全てのデバイス向け+SP用のスタイル*/ 2.cardList__item + .cardList__item { 3 margin-top: 30px; 4} 5/*PC用のスタイル*/ 6@media screen and (min-width: 768px),print { 7 .cardList { 8 display: flex; 9 justify-content: space-between; 10 } 11 .cardList__item { 12 width: calc((100% - 60px) / 3); 13 } 14 .cardList__item + .cardList__item { 15 margin-top: 0; 16 } 17}

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

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答3

0

ベストアンサー

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

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

html

1<ul> 2 <li class="b">b1</li> 3 <li class="b">b2</li> 4 <li class="b">b3</li> 5 <li class="b">b4</li> 6 <li class="b">b5</li> 7</ul> 8 9<ul> 10 <li class="a">a1</li> 11 <li class="a">a2</li> 12 <li class="b">b1</li> 13 <li class="b">b2</li> 14 <li class="b">b3</li> 15</ul> 16 17<ul> 18 <li class="a">a1</li> 19 <li class="a">a2</li> 20 <li class="b">b1</li> 21 <li class="b">b2</li> 22 <li class="a">a3</li> 23 <li class="b">b3</li> 24</ul>

css

1.b + .b { 2 background: yellow; 3}

投稿2023/01/31 11:32

arcxor

総合スコア2451

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kame2

2023/01/31 12:00

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

0

設計手法(命名規則)の1つです。
https://www.northdetail.co.jp/blog/1953/

投稿2023/01/31 11:16

m.ts10806

総合スコア80415

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

m.ts10806

2023/01/31 11:16

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

2023/01/31 11:42

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

0

書いてのとおりです。

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

投稿2023/01/31 11:14

maisumakun

総合スコア142279

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kame2

2023/01/31 11:43

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。