CSSセレクタの組み合わせに関する実践
div要素 div 内にある段落を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
div要素 div 内にあるすべての h2 を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
id が block である要素内のすべての段落 p を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
id が block である要素内のすべての h2 を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
クラス bbb を持つすべての要素を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
+++
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
id が block である要素内で、クラス bbb を持つすべての要素を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
クラス bbb を持つすべての段落 p を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
クラス bbb を持つすべての h2 を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
id が block である要素内で、クラス bbb を持つすべての段落 p を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
クラス bbb を持つすべての要素と、クラス xxx を持つすべての要素を同時に選択するセレクタを記述してください（つまり、カンマで区切ってセレクタをグループ化する必要があります）。
以下のコードでセレクタをテストしてください：
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
クラス bbb を持つすべての段落 p と、クラス xxx を持つすべての h2 を同時に選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
id が block である要素内で、クラス bbb を持つすべての段落 p と、id が block である要素内で、クラス xxx を持つすべての段落 p を同時に選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">---</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
---
</div>
<div class="xxx">
---
</div>
</div>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
クラス fff を持つすべての要素を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
クラス fff を持つ要素内のすべての段落 p を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
クラス fff を持つすべての段落 p を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
クラス fff を持つ要素内で、クラス bbb を持つすべての要素を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
クラス fff を持つ要素内で、クラス bbb を持つすべての h2 を選択するセレクタを記述してください。
以下のコードでセレクタをテストしてください：
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p class="bbb">
---
</p>
</div>
<h2 class="bbb">---</h2>
<p class="bbb">
---
</p>
<p class="fff">
---
</p>
