선택자 우선순위
CSS 언어에는 충돌 시 어떤 규칙이 우선하는지 규칙이 있습니다. 이러한 규칙을 계단식(Cascade) 및 우선 순위(Specificity)라고 합니다.
CSS 선택자 우선순위는 크게 세 가지 원칙을 따릅니다.
- 후자 우선의 원칙 뒤에 나오는 CSS가 우선순위가 높습니다
- 구체성(명시도)의 원칙
- 중요성의 원칙
1. 후자 우선의 원칙
CSS에서는 동일한 선택자에 동일한 속성이 여러 번 정의될 경우, 가장 마지막에 정의된 스타일이 적용됩니다. 이를 '후자 우선의 원칙'이라고 합니다.
이 경우, 모든 <p>
요소의 텍스트 색상은 가장 마지막에 정의된 스타일인 빨간색이 됩니다.
2. 구체성(명시도, Specificity)의 원칙
구체성, 또는 명시도는 선택자가 얼마나 구체적으로 요소를 지정하는지를 나타냅니다. 더 구체적인 선택자가 덜 구체적인 선택자보다 우선순위가 높습니다.
2.1 구체성 계산 방법
구체성은 다음과 같은 가중치로 계산됩니다.
- 인라인 스타일: 1000점
- ID 선택자: 100점
- 클래스 선택자, 가상 클래스, 속성 선택자: 10점
- 요소(타입) 선택자, 가상 요소 선택자: 1점
- 전체 선택자: 0점
위 순서대로 가중치가 높습니다.
이 경우, #container p
가 가장 구체적이므로, 텍스트 색상은 파란색이 됩니다.
[추천사이트: 명시도 계산기 사이트]
Specificity Calculator3. 중요성의 원칙
!important
선언은 다른 모든 선언보다 우선합니다. 이는 매우 강력한 도구이지만, 남용하면 CSS의 예측 가능성과 유지보수성을 해칠 수 있습니다. !important
는 선택자 우선순위에 직접적인 영향을 미칩니다.
important 사용은 좋지 못한 습관입니다.
CSS의 자연스러운 상속을 깨트리기 때문에 오류/버그 발생 시 수정을 어렵게 만듭니다.
명시도의 개념을 재미난 그림으로 나타낸 사이트
CSS Specifishity