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

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

1. 후자 우선의 원칙

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

p {
  color: blue;
}

p {
  color: red;
}

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

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

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

2.1 구체성 계산 방법

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

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

<div id="container">
  <p class="text">Hello, World!</p>
</div>

#container p {
  color: blue;
} /* 구체성: 101 */
div .text {
  color: red;
} /* 구체성: 11 */
p {
  color: green;
} /* 구체성: 1 */

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

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

3. 중요성의 원칙

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

<p class="important">Hello, World!</p>

p {
  color: blue;
}
.important {
  color: red !important;
}

4. 상속과 우선순위

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

<div class="parent">
  <p>이 텍스트는 부모의 색상(분홍색)을 상속받습니다.</p>
  <p class="child">이 텍스트는 직접 적용된 색상(빨간색)을 사용합니다.</p>
</div>

.child {
  color: red;
}

html body div.parent {
  color: pink;
}

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

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