CSS 선택자 조합 실습
div 내부에 위치한 문단을 선택하는 선택자를 작성하십시오.
다음 코드에서 작성한 선택자를 테스트해 보십시오:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
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>
