HTML5 CSS 후손 자손 선택자

CSS에서는 여러 선택자를 지원합니다.

그 중 후손, 자손 선택자에 대한 예제입니다.

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>CSS Selector</title> 
    <style> 
        /*후손 선택자*/ 
        body li {background-color:green; color:yellow;} 
 
        /*자손 선택자*/ 
        body > h1 {background-color:blue; color:white;} 
    </style> 
</head> 
<body> 
<ul> 
    <li>CSS Selector Basic</li> 
    <li>CSS Selector Basic</li> 
    <li>CSS Selector Basic</li> 
</ul> 
<h1>CSS Selector Basic</h1> 
<h1>CSS Selector Basic</h1> 
<h1>CSS Selector Basic</h1> 
<h1>CSS Selector Basic</h1> 
 
</body> 
</html>

 
확인하기