子セレクタ(>)

子孫セレクタ

セレクターリスト

<div class="parent01">
  <p>子要素です。</p>
  <div>
    <p>子孫要素です。</p>
  </div>
</div>

<div class="parent02">
  <p>子要素です。</p>
  <div>
    <p>子孫要素です。</p>
  </div>
</div>


/* 問題1. 複数セレクタへのスタイル適用 */
/* この下に解答してください */
.parent01,
.parent02 {
  display: inline-block;
  padding: 8px;
  border: 1px solid #cccccc;
}

/* 問題2. 子セレクタへのスタイル適用 */
/* この下に解答してください */
.parent01 > p {
  color: #ff0000;
}

/* 問題3. .子孫セレクタへのスタイル適用 */
/* この下に解答してください */
.parent02 p {
  color: #0000ff;
}


/* 問題1. 複数セレクタへのスタイル適用 */
/* この下に解答してください */

/* 問題2. 子セレクタへのスタイル適用 */
/* この下に解答してください */

/* 問題3. .子孫セレクタへのスタイル適用 */
/* この下に解答してください */



子セレクタ・子孫セレクタ

要素型セレクタ

全称セレクタ（*）

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

全称セレクタ

classセレクタ

idセレクタ

演習問題

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

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。