CSS 선택자

개념 이해하기

태그 선택자는 같은 요소 전체, .class는 재사용 그룹, #id는 고유 요소를 고릅니다. 실제 UI 스타일에는 재사용하기 쉽고 우선순위가 과하지 않은 class 선택자가 가장 흔합니다.

h1 태그 선택자는 문서의 제목을 고르고, .target은 class에 target이 들어 있는 두 div에 같은 배경과 여백을 줍니다. 마지막 .target.second는 두 class 이름 사이에 공백이 없어 둘을 모두 가진 요소만 고르므로, 왼쪽 초록 테두리는 두 번째 상자에만 생깁니다.

.target .second처럼 사이에 공백을 넣으면 의미가 후손 선택자로 바뀌어 target 요소 안쪽에 있는 second 요소를 찾습니다. 이 예제의 두 div는 형제 관계라 그런 요소가 없으므로, 공백 하나 때문에 테두리가 아무 곳에도 그려지지 않습니다.