フクロウセレクタ(* + *)

/*  問題1. フクロウセレクタを使って特定の位置にある要素を指定しよう */
.box > * + * {
  margin-top: 40px;
}


/*  問題1. フクロウセレクタを使って特定の位置にある要素を指定しよう */



    const questions = [
        {
            title: 'フクロウセレクタを使って特定の位置にある要素を指定しよう',
            tests: [
                {
                    title: '`box`クラスに対してフクロウセレクタを使い、はじめの`p`要素以外の上部の余白を`*40px*`に設定してください。',
                    hint: '`*.box > * + * { }*`の中にスタイルを記述してください。上方向の余白は`*margin-top*`プロパティを使用します。',
                    test: () => isContainTextInEditor('margin-top: 40px;', 'style.css', '.box > * + * {', '}')
                }
            ]
        }
    ];


フクロウセレクタの使い方を知ろう

要素型セレクタ

セレクタとは何かを知ろう

全称セレクタ（*）

```css
$(1) {
  margin: 0;
  padding: 0;
}
```

全称セレクタの使い方を知ろう

classセレクタ

クラスセレクタの使い方を知ろう

idセレクタ

idセレクタの使い方を知ろう

【演習】セレクタを使用してコンテンツを作成しよう1

セレクターリスト

セレクターリストの使い方を知ろう

子孫セレクタ

子孫セレクタの使い方を知ろう

子セレクタ(>)

子セレクタの使い方を知ろう

隣接兄弟セレクタ(+)

隣接兄弟セレクタの使い方を知ろう

【演習】セレクタを使用してコンテンツを作成しよう2

属性セレクタ

属性セレクタの使い方を知ろう

【演習】セレクターを使用してフォームコンテンツのレイアウトを整えよう

CSSにおけるセレクタの選択方法を詳しく学び、複雑なデザイン要件にも対応できるようになります。
タグから属性、似ていないセレクタまでを深く理解します。

「セレクタの使い方を学ぼう」レッスンの総復習クイズです。