본문 바로가기
css

CSS3 후손 선택자

by wanee 2015. 1. 28.

 

<!DOCTYPE html>
<html>​
<head>
<meta charset="utf-8">


  <style>
    #header h1{color:red;}

    #section h1{color:blue;}​

​  </style>


</head>


<body>​

<div id="header">​

<h1 class="title">title</h1>

<div id="nav">

<h1>CSS연습<​h1>
<h2>CSS연습2<​h2>

</div>

</div>​

<div id="section">​

 <h1 class="title">title</h1>

<div id="nav">

<h1>CSS연습<​h1>
<h2>CSS연습2<​h2>

</div>

</div>​

</body>​
</html>

 

 

 

 

 

주의사항

 

<style>

#header h1, h2{color:red;}

</style>

위와 같은 선택자는 #header 태그의 후손에 위치하는 h1태그를 선택하고 일반적인 h2태그를 선택합니다.

만약 #header 태그의 후손에 위치하는 h1태그와 #header 태그의 후손에 위치하는 h2태그를 선택하고 싶다면,

다음과 같이 사용해야 합니다.

<style>

​ #header h1, #header h2{color:red;}

</style>

 

댓글