CSS3 후손 선택자

css

wanee 2015. 1. 28. 15:27

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

#section h1{color:blue;}

</style>

</head>

<body>

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

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

</div>

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

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

</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>