WeniVooks

선택자 우선순위

CSS 언어에는 충돌 시 어떤 규칙이 우선하는지 규칙이 있습니다. 이러한 규칙을 계단식(Cascade) 및 우선 순위(Specificity)라고 합니다.

CSS 선택자 우선순위는 크게 세 가지 원칙을 따릅니다.

1. 후자 우선의 원칙 뒤에 나오는 CSS가 우선순위가 높습니다
2. 구체성(명시도)의 원칙
3. 중요성의 원칙

1. 후자 우선의 원칙

CSS에서는 동일한 선택자에 동일한 속성이 여러 번 정의될 경우, 가장 마지막에 정의된 스타일이 적용됩니다. 이를 '후자 우선의 원칙'이라고 합니다.

p {
  color: blue;
}
 
p {
  color: red;
}

p {
  color: blue;
}
 
p {
  color: red;
}

이 경우, 모든 <p> 요소의 텍스트 색상은 가장 마지막에 정의된 스타일인 빨간색이 됩니다.

2. 구체성(명시도, Specificity)의 원칙

구체성, 또는 명시도는 선택자가 얼마나 구체적으로 요소를 지정하는지를 나타냅니다. 더 구체적인 선택자가 덜 구체적인 선택자보다 우선순위가 높습니다.

2.1 구체성 계산 방법

구체성은 다음과 같은 가중치로 계산됩니다.

1. 인라인 스타일: 1000점
2. ID 선택자: 100점
3. 클래스 선택자, 가상 클래스, 속성 선택자: 10점
4. 요소(타입) 선택자, 가상 요소 선택자: 1점
5. 전체 선택자: 0점

위와 순서대로 가중치가 높습니다.

이 경우, #container p가 가장 구체적이므로, 텍스트 색상은 파란색이 됩니다.

[추천사이트: 명시도 계산기 사이트]

3. 중요성의 원칙

!important 선언은 다른 모든 선언보다 우선합니다. 이는 매우 강력한 도구이지만, 남용하면 CSS의 예측 가능성과 유지보수성을 해칠 수 있습니다. !important 는 선택자 우선순위에 직접적인 영향을 미칩니다.

명시도의 개념을 재미난 그림으로 나타낸 사이트