![[2021/12/17]국비지원 CSS3 1-(3) 하위선택자](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FSXiun%2Fbtrr7p6yvu1%2FAAAAAAAAAAAAAAAAAAAAADhyQMURXKvrNNzGm1-1IA5-Zqzp37W_0YMFfhd6r9hW%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DRVrYdJRoZWgarliRX5zicy2ajjg%253D)
CSS3
element와 element는 조합해서 쓸 수 있다.
상위 element의 class 또는 id와 하위 element 조합 방식도 가능하고,
상위 element 중위 element 하위 element 이런 방식 역시 ok
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document<title>
<style type="text/css">
div p{color: red;}
.text p{color: green;}
div div p{color: blue;}
</style>
</head>
<body>
<h1>하위선택자</h1>
<p>하위 선택자에 대해 알아봅시다.</p>
<div>
<p>2선택자와 선택자는 서로 조합하여 사용할 수 있다.</p>
<div class="text">
<p>3이 때 하위 선택자 방식을 이용할 경우 특정 선택자 안에 포함된
하위 요소들을 선택하여 스타일을 지정할 수 있습니다.</p>
</div>
</div>
</body>
</html>
결과물
