🌐WEB
[CSS] 선택자에서 꺽쇠 > 의 의미는? (자식 선택자, 하위 선택자)
Cocoon_
2022. 2. 10. 11:36
반응형
🚀
다른 사람들의 css파일을 보다 보면 '>' 기호를 사용하여 작성되어있는 것을 자주 봤었는데 대체 무슨 뜻일까 하여 한번 알아봤습니다.
우선은 body에 아래와 같은 코드가 있다고 가정하겠습니다.
<div class="parent">
<p>child</p>
<div>
<p>grand child</p>
</div>
</div>
이러한 상황에서 다음과 같이 style을 생성하면
📋 코드
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent p {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<p>child</p>
<div>
<p>grand child</p>
</div>
</div>
</body>
</html>👨🏻💻 결과
클래스가 parent인 태그 내의 모든 p태그의 color값이 red로 변경되게 됩니다.
여기서 이러한 방식을 하위 선택자라고 합니다.(스페이스, 띄어쓰기)
이번엔 꺽쇠를 사용해서 style을 생성하면
📋 코드
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent > p {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<p>child</p>
<div>
<p>grand child</p>
</div>
</div>
</body>
</html>👨🏻💻 결과
클래스가 parent인 태그 내의 모든 p태그 중에서 자식인 p태그에 대해서만 color가 적용됩니다.
쉽게 말해서 오로지 자식에게만 적용되고 그 뒤의 후손? 손주? 들에게는 적용이 안 되는 것입니다.
이러한 방식을 자식 선택자라고 합니다.(꺽쇠, '>')
📚
정리하자면 하위 선택자는 자식, 손주, 증손주,....... 모든 후손들에게 영향을 주지만
자식 선택자의 경우 오로지 자기 자식에게만 영향을 줍니다.
반응형