HTML5 CSS 동위 선택자

앞서 CSS에서는 여러 선택자가 있다고 했습니다.

그 중 동위 선택자, 즉 같은 레벨에 있는 것을 선택하는 예제입니다.

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        /*동위 선택자 (바로 뒤에 위치한 것)*/ 
        h1 + h2 {color:red;} 
 
        /*동위 선택자 (뒤에 위치한 모두)*/ 
        h1 ~ h2 {background-color:orange;} 
    </style> 
</head> 
<body> 
<h1>Header-1</h1> 
<h2>Header-2</h2> 
<h2>Header-2</h2> 
<h2>Header-2</h2> 
<h2>Header-2</h2> 
</body> 
</html>

 
확인하기