📒솜이노트

# CSS 선택자 정리 : 인접 형제 결합자부터 형제 선택자까지

웹 스타일링을 할 때 '어떤 요소를 기준으로 다른 요소를 선택할까' 하는 문제는 아주 자주 마주합니다. 이번 글에서는 인접 형제 결합자(+), 일반 형제 결합자(~) 를 중심으로, 관련된 선택자들을 예시와 함께 정리해서 티스토리 블로그에 바로 올릴 수 있게 작성했습니다. 코드 예시와 자주 쓰이는 패턴, 실전 팁까지 담았으니 복사해서 바로 사용하세요. 인접 형제(+), 일반 형제(~), 자식(>), 후손(스페이스) 선택자 차이와 예제 정리. 실무에서 자주 쓰이는 패턴과 주의사항까지 한 번에. 1) 개요 — 선택자(Combinators)란?CSS 결합자(combinator)는 두 개 이상의 선택자 사이의 관계를 표현합니다. 예를 들어 ‘어떤 요소의 바로 다음 형제’라거나 ‘어떤 요소의 자식’ 같은 관계를 선..