CSS セレクタクイズ

1 第1問

`div`要素の子孫であるすべての`p`要素を選択するCSSセレクタはどれですか？

A div > p

B div + p

C div p

D div ~ p

2 第2問

マウスカーソルが要素の上にあるときにスタイルを適用する擬似クラスはどれですか？

A :focus

B :active

C :hover

D :visited

3 第3問

`data-status`属性を持ち、その値が「pending」で始まるすべての要素を選択するCSSセレクタはどれですか？

A [data-status="pending"]

B [data-status~="pending"]

C [data-status^="pending"]

D [data-status*="pending"]

4 第4問

要素のコンテンツの直前に生成されたコンテンツを挿入するために使用される擬似要素はどれですか？

A ::after

B ::first-line

C ::before

D ::selection

5 第5問

次のCSSセレクタの中で、最も高い詳細度（Specificity）を持つものはどれですか？

A p

B .item

C #header

D div.item

6 第6問

`ul`要素の直接の子である`li`要素のみを選択するCSSセレクタはどれですか？

A ul li

B ul + li

C ul > li

D ul ~ li

7 第7問

すべてのHTML要素を選択するCSSセレクタはどれですか？

A all

B *

C element

D html

8 第8問

親要素の3番目の子要素である`li`要素を選択するCSSセレクタはどれですか？

A li:first-child

B li:last-child

C li:nth-child(3)

D li:nth-of-type(3)

9 第9問

`h1`要素と`h2`要素の両方に同じスタイルを適用したい場合、適切なセレクタの記述方法はどれですか？

A h1 h2

B h1 + h2

C h1, h2

D h1 ~ h2

10 第10問

特定の属性を持つ要素、または特定の属性値を持つ要素を選択するために使用されるCSSセレクタは次のうちどれですか？

A #id

B .class

C [attribute]

D element

CSS セレクタ クイズ