본문 바로가기

프로그래밍/HTML5

자손 선택자

 

<!DOCTYPE html>
<html>
   <meta charset="utf-8">
   <head>
      <title>자손 선택자</title>
      <style>
         #header > h1 {color:red;}
         #section > h1 {color:blue;}
      </style>
   </head>
   <body>
      <div id="header">
         <h1 class="title">자손 선택자 테스트</h1>
         <div id="nav">
            <h1>오렌지</h1>
         </div>
      </div>
      <div id="section">
         <h1 class="title">자손 선택자 테스트중</h1>
         <p>자손 선택자 테스트중입니다</p>
      </div>
   </body>
</html>

 

header의 자손은 h1 class="title"이다.

section의 자손은 h1 class="title"이다.

 

'프로그래밍 > HTML5' 카테고리의 다른 글

상태선택자 태그  (0) 2017.09.20
반응선택자태그  (0) 2017.09.20
후손 선택자  (0) 2017.09.20
클래스,속성 선택자  (0) 2017.09.20
아이디 선택자 및 padding, margin  (0) 2017.09.20