🌱 기초 프론트엔드
CSS 선택자 >와 공백의 차이
쉽게 이해하기
가족 모임에서 '내 자녀들'이라고 하면 아들, 딸만 해당하죠. 하지만 '내 후손들'이라고 하면 손자, 증손자까지 모두 포함돼요. >는 자녀, 공백은 후손이에요.
핵심 정리
> 는 직계 자식만, 공백은 모든 하위 요소를 선택해요.
자세히 알아보기
CSS에서 div p는 div 안에 있는 모든 p 태그를 선택해요. 중간에 다른 태그가 있어도 상관없이 깊이에 관계없이 전부 선택하죠. 이걸 자손 선택자(descendant selector)라고 불러요.
반면 div > p는 div의 바로 아래 자식인 p만 선택해요. 중간에 다른 태그가 껴있으면 선택되지 않아요. 이게 자식 선택자(child selector)예요.
실무에서는 의도치 않은 스타일 적용을 막기 위해 >를 자주 써요. 예를 들어 nav li { color: blue; }라고 쓰면 nav 안에 있는 모든 li가 파란색이 되는데, nav > li로 쓰면 첫 번째 depth의 li만 파란색이 되죠.
컴포넌트 기반 개발에서 특히 중요해요. 부모 컴포넌트의 스타일이 자식 컴포넌트 내부까지 영향을 미치는 걸 방지할 수 있거든요. 정확한 선택자를 쓰면 CSS 충돌을 줄일 수 있어요.