CSS selector의 주요 유형에는 어떤 것들이 있나요?

Question

IT Interview Practice · Accepted Answer

selector는 규칙이 적용될 요소를 지정합니다. 단순한 것(태그 기준)부터 강력한 combinator까지 다양합니다. ```css /* 기본 selector */ p { } /* 타입: 모든

*/ .card { } /* 클래스: class="card"인 요소 (재사용 가능) */ #header { } /* id: id="header"인 단 하나의 요소 (고유) */ * { } /* 전체(universal): 모든 요소 */ [type="text"]{ } /* 속성: type=text인 input */ ``` ## Combinator — 요소 간의 관계 ```css .menu li { } /* 자손(descendant): .menu 내부의 모든 li (깊이 무관) */ .menu > li { } /* 자식(child): 직계 자식 li만 */ h2 + p { } /* 인접 형제(adjacent sibling): h2 바로 뒤의 p */ h2 ~ p { } /* 일반 형제(general sibling): h2 이후의 모든 형제 p */ ``` 공백(자손)과 `>`(직계 자식)의 차이는 중요합니다. `.menu li`는 깊이 중첩된 `li`도 매칭하지만, `.menu > li`는 최상위 레벨만 매칭합니다. ## Pseudo-class와 pseudo-element ```css a:hover { } /* 상태: 호버 중일 때 */ li:first-child { } /* 구조적: 첫 번째 li */ li:nth-child(2n){ } /* 짝수 번째 li마다 */ p::first-line { } /* pseudo-element: 렌더링된 첫 번째 줄 */ ``` ## 그룹화와 최신 selector ```css h1, h2, h3 { } /* 세 가지 모두에 적용 */ :is(h1, h2) a { } /* :is()로 긴 selector 목록을 축약 */ .card:has(img) { } /* :has() — img를 포함하는 부모 */ ``` ## 왜 중요한가 selector는 스타일을 마크업에 연결하는 방법입니다. 클래스(주력 도구), combinator(관계 표현), 구조적/상태 pseudo-class를 익히면 곳곳에 추가 클래스를 붙이지 않고도 정확히 타겟팅할 수 있으며, 최신 `:is()`/`:has()`는 복잡한 타겟팅을 간결하게 만들어 줍니다. specificity를 관리 가능하게 유지하려면 id나 과도한 중첩보다 클래스를 선호하세요.

Combinator — 요소 간의 관계

Pseudo-class와 pseudo-element

그룹화와 최신 selector

왜 중요한가

관련 질문