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 는 선택자 우선순위에 직접적인 영향을 미칩니다.

4. 상속과 우선순위

CSS에서 일부 속성은 부모 요소에서 자식 요소로 상속됩니다. 그러나 상속된 속성은 요소에 직접 적용된 속성보다 우선순위가 낮습니다.

상속된 속성은 구체성 점수가 0점으로 취급되므로, 직접 적용된 스타일이 항상 상속된 스타일보다 우선합니다.

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