더북(TheBook)

5.2.3 하위 선택자

하위 선택자는 선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법입니다. 2개 이상의 선택자를 사용하고, 선택자와 선택자는 공백으로 구분합니다.

형식

선택자1 선택자2 선택자3 ...{/* CSS 코드 */}

다음 코드는 div 태그의 하위에 있는 p 태그로 작성된 요소만 선택해 텍스트 색상을 빨간색으로 적용합니다.

05/02/desent_selector.html

<style>
  div p{
    color:red;
  }
</style>
(중략)
<div>
  <p>lorem 1</p> 
  <ul>
    <li>
      <p>lorem 2</p> 
    </li>
    <li>
      <p>lorem 3</p> 
    </li>
  </ul>
</div>
<p>lorem 4</p>

 

div 태그의 하위에 있는(자손인) p 태그에만 적용

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.