指定の場所にのみ背景色を追加したいです

Question

指定の場所にのみ背景色を追加したいです

ここに質問の内容を詳しく書いてください。
課題でHTMLのサンプルサイトを作りCSSの練習をしています。
条件は
・要素セレクタを使用せずにclasssセレクタか子孫セレクタのみで作成
です。
背景色を変えたい場所はsectionの部分です。

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

section部分にのみ背景色を設定したいのですが、headerにも反映されてしまったり、h3に反映されなかったりして困っています。

エラーメッセージなし

該当のソースコード

<main　class="main">
            <article class="main_content">
                <h2 class="content_title">たまに行きたいこんなお店</h2>
                <div class="content_discription">
                    <p>今度の休みは足を伸ばして、新しいレシピのアイデアを見つけに。</p>
                    <p>料理人のセンスが光る、名店の独創的な一皿をご紹介。</p>
                </div>
            <section class="dish">
                <h3 class="dish_title">割烹・山もと 山菜のジュレ</h3>
                <div class="dish_content">
                    <figure class="dish_left">
                    <img src="images/dish1.jpg" alt="山菜のジュレ">
                    <figcaption>季節の山菜を大胆にジュレに仕上げる。</figcaption>
                    </figure>
                <div class="dish_right">
                    <p>一品目は麻布十番の名店、割烹・山もとから。店主自身が摘んできたという朝採りの山菜を和風のジュレに仕立てています。</p>
                    <p>和とフレンチの垣根を超えた一品です。</p>
                </div>
                </div>
            </section>
            <section>
                <h3 class="dish_title">オステリア・ダ・ナカムラ カツレツのエスプーマ添え</h3>
                <div class="dish_content">
                    <figure class="dish_left">
                    <img src="images/dish2.jpg" alt="カツレツのエスプーマ添え">
                    <figcaption>衣にまぶすことの多いハーブとチーズをエスプーマに。</figcaption>
                    </figure>
                    <div class="dish_right">
                        <p>人形町の隠れ家イタリアン、オステリア・ダ・ナカムラから。イタリアとスペインで修行を積んだ中村シェフの独創的な一皿。</p>
                        <p>パルメザンとフリーズドライしたハーブをエスプーマにして添え、新たな食感を生み出しています。</p>
                </div>
                </div>
            </section>
            <section>
                <h3 class="dish_title">香月房 牛フィレ肉の中華パン包み</h3>
                <div class="dish_content">
                    <figure class="dish_left">
                        <img src="images/dish3.jpg" alt="牛フィレ肉の中華パン包み">
                        <figcaption>甘辛く仕上げた牛フィレ肉を花巻に包む。</figcaption>
                    </figure>
                <div class="dish_right">
                    <p>トロトロの三枚肉ではなく、あえてあっさりした牛フィレ肉を花巻と呼ばれる中華パンに包んだバーガー風の一品。</p>
                    <p>柔らかく蒸し煮にされたヒレ肉がヘルシーかつ贅沢な仕上がりです。</p>
                </div>
                </div>
            </section>
    </article>
</main>
</div>
</div>

試したこと

CSSで
section {
background-color: #ced5db;
}
.dish {
background-color: #ced5db;
}
.dish_title {
{
background-color: #ced5db;
}
.dish_left {
background-color: #ced5db;
}
.dish_right {
background-color: #ced5db;
}

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

ここにより詳細な情報を記載してください。

Comments

[hatena19]

> 背景色を変えたい場所はsectionの部分です。
なら、
section {
background-color: #ced5db;
}
でいいはずですが、それでダメな理由を提示してください。
.main内のsectionに限定したいなら、
.main section {
background-color: #ced5db;
}

> 要素セレクタを使用せず
なぜ？理由を提示してください。
classのみでなら、該当要素にクラスを設定してください。

[moke_cocco]

hatena19さん、回答ありがとうございます！
文章がわかりづらく申し訳ありません。

sectionにするとメインの背景色lightcyanを上書きして、メインの欄が全て#ced5dbの背景色になってしまいます。
完成図は
・ヘッダー/フッターは白（背景色なし）
・mainの背景がlightcyan
・mainのsectionのみ#ced5db（各section同士の行間に隙間があって、そこにmainの背景色lightcyanが見える状態）
を目指しています。

今はsection同士の隙間にあるはずのmainの背景色がなく、mainが全て#ced5dbになってしまっています。。

教えていただいた二つのコードを打ち込んでみましたが、section同士の隙間にmainの背景色を出すことができませんでした・・・。

・要素セレクタを使用せず
→課題の指定条件なため今回は使用せずに作成したいです。

お時間ある際に、教えていただけると幸いです。
どうぞよろしくお願いいたします！

[m.ts10806]

質問は編集できますので適宜追記してください。

Answer 1

・ヘッダー/フッターは白（背景色なし）

・mainの背景がlightcyan
・mainのsectionのみ#ced5db（各section同士の行間に隙間があって、そこにmainの背景色lightcyanが見える状態）

上記の仕様通りなら、下記でいいはず。

main  {
  background-color: lightcyan;
}

main > section {
  background-color: #ced5db;
}

・要素セレクタを使用せず

→課題の指定条件なため今回は使用せずに作成したいです。

意味不明な条件だが、section にクラスが付加されていないので、やるなら、下記のような感じ。

.main  {
  background-color: lightcyan;
}

.main_content > :not(.content_title, .content_discription) {
  background-color: #ced5db;
}

Comments

[moke_cocco]

ありがとうございます！
教えていただいたコードでやっと解決することができました！！
私も要素使っちゃいけないという条件はハテナです笑
classセレクタと子孫/子孫セレクタの練習課題だったので使わせたかったのかと思います。
notで表示しない部分を指定することもできるんですね！
教科書に載っておらず、どのように調べたいいかもわからなくて困っていたので本当に助かりました！
助けていただきありがとうございます????