🌱 기초 프론트엔드
CSS 선택자 우선순위는 어떻게 되나요?
쉽게 이해하기
군대 계급을 떠올려보세요. 장군의 명령이 병장의 명령보다 우선이듯, CSS에서도 ID 선택자(#)가 클래스 선택자(.)보다, 클래스가 요소 선택자(div, p)보다 우선합니다. 같은 요소에 여러 스타일이 적용될 때 '계급'이 높은 선택자가 이깁니다.
핵심 정리
ID 선택자가 가장 강하고, 클래스가 그 다음, 요소 선택자가 가장 약합니다.
자세히 알아보기
CSS에서 같은 요소에 여러 스타일이 적용될 때, 어떤 스타일을 적용할지 정하는 규칙이 있습니다. 이걸 명시도(specificity)라고 해요. 선택자마다 점수가 있어서, 점수가 높은 선택자의 스타일이 최종적으로 적용됩니다.
우선순위는 이렇습니다: 인라인 스타일 > ID 선택자 > 클래스/속성/가상클래스 선택자 > 요소 선택자 > 전역 선택자. 예를 들어 <div style='color: red'>는 CSS 파일의 어떤 규칙보다도 우선하고, #header는 .header보다 우선합니다.
실무에서 가장 흔한 문제는 '내가 쓴 CSS가 적용이 안 돼요!'인데, 대부분 우선순위 때문입니다. 더 강한 선택자가 이미 적용되어 있어서 내 스타일이 무시되는 거죠. 이럴 때 !important를 쓰면 모든 우선순위를 무시하고 적용되지만, 나중에 관리하기 어려워지니까 최후의 수단으로만 써야 합니다.
좋은 습관은 가능한 한 클래스 선택자를 주로 쓰고, ID는 JavaScript에서 요소를 찾을 때만 쓰는 것입니다. 이렇게 하면 CSS 우선순위 문제를 줄일 수 있어요.