반응형
🚀
다른 사람들의 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가 적용됩니다.
쉽게 말해서 오로지 자식에게만 적용되고 그 뒤의 후손? 손주? 들에게는 적용이 안 되는 것입니다.
이러한 방식을 자식 선택자라고 합니다.(꺽쇠, '>')
📚
정리하자면 하위 선택자는 자식, 손주, 증손주,....... 모든 후손들에게 영향을 주지만
자식 선택자의 경우 오로지 자기 자식에게만 영향을 줍니다.
반응형
'🌐WEB' 카테고리의 다른 글
| [HTML/CSS] 텍스트가 넘칠 때 생략하는 방법 (... 말줄임 표시) (2) | 2022.03.11 |
|---|---|
| [CSS] display: none 과 visibility: hidden의 차이 (0) | 2022.02.17 |
| [CSS] 하단바, 하단영역 고정하는 방법 (1) | 2022.01.31 |
| [WEB] 회원가입 창 만들기 (HTML, CSS, JS / 입력형식체크, 문자인증 기능추가) (12) | 2021.10.23 |
| [CSS3] CSS 포지션(position) 잡기 - static, absolute, fixed, relative (0) | 2021.10.11 |