[CSS] CSS의 우선순위

CSS로 스타일을 위해 HTML 요소를 선택할 때 실제로 서로 다른 선택자를 사용하는 두 개 이상의 규칙이 동일한 요소를 선택하는 경우가 있다.
이 때 어떤 규칙을 우선 적용할지 판단하기 위해 브라우저는 선택자가 얼마나 구체적인지를 계산하여 더 구체적인 선택자를 우선 적용한다.
이 과정에서 CSS 선택자의 구체성 값(Specificity) 을 사용한다.

구체성 값(Specificity)이란?

스타일이 적용되는 선택자가 얼마나 구체적으로 선언되어 있는지를 숫자로 나타낸 값이다.

ID > CLASS > ELEMENT 순으로 구체성 값이 높으며,구체성 값이 높은 선택자가 우선 적용된다.

구체성 값 계산 방법

각 값은 아래와 같이 계산된다:

1. ID 선택자 (#id)
   • 선택자에 포함된 모든 #id 선택자에 0,1,0,0 값을 추가.
   • 예: #header는 0,1,0,0 값을 가진다.
2. 클래스, 가상 클래스, 속성 선택자 (.class, :hover, [type="text"])
   • 선택자에 포함된 모든 .class 선택자, 가상 클래스(:hover, :focus 등), 속성 선택자([type="text"] 등)에 0,0,1,0 값을 추가.
   • 예: .button:hover는 0,0,2,0 값을 가진다.
3. 요소 이름 및 가상 요소 선택자 (div,p,::before,::after)
   • 선택자에 포함된 모든 요소 이름과 가상 요소에 0,0,0,1 값을 추가.
   • 예: p::before는 0,0,0,2 값을 가진다.
4. 영향을 주지 않는 선택자
   • *(전체 선택자): 구체성 값에 영향을 주지 않는다.
   • :is(), :not() 자체는 영향을 주지 않지만, 내부에 선언된 선택자는 영향을 끼친다.

---

구체성 값 비교 예제

p {
  color: yellow;
}

요소 선택자 한 개만 존재한다. 따라서 구체성 값은 0,0,0,1이다.

section p {
  color: yellow;
}

요소 선택자 두 개가 존재한다. 따라서 구체성 값은 0,0,0,2이다.

위의 경우 select p가 p보다 더 구체적이라고 판단하기 때문에 color 속성의 값은 yellow가 된다.

---

인라인 스타일의 구체성 값

HTML 요소의 style 속성을 사용한 인라인 스타일은 가장 높은 구체성 값을 가진다. 이는 선택자로 HTML 요소를 선택하는 것이 아니라, 직접 스타일을 지정하기 때문이다

선택자로 HTML 요소를 선택하는 것이 아닌, 직접 스타일하는 것이니 당연히 구체성이 가장 크다.

<h1 id="green-color" style="color:red;">id로 선택된 제목글입니다.</h1> <!-- 구체성 값 = 1,0,0,0 -->

구체성 값 계산

• 인라인 스타일은 구체성 값 **`1,0,0,0`**으로 계산된다.
• 이는 ID 선택자보다도 높은 구체성을 가지며, 다른 모든 규칙보다 우선 적용된다.

!important 선언

!important는 구체성 값과는 별도로 스타일 적용 우선순위를 강제하는 기능이다.
CSS 스타일을 지정할 때, 특정 속성을 다른 모든 속성보다 최우선으로 적용하고 싶은 경 사용한다.

!important는 시스템 전체에 영향을 미칠 수 있는 강력한 선택자이기 때문에, 남용해서는 안된다.

주로 다른 사람이 써놓은 스타일, 즉 우리가 통제할 필요가 없는 외부 라이브러리나 도구를 사용하는 경우에 유용하게 사용할 수 있다. 과도하게 사용하면 디버깅 및 유지보수가 어려워지므로 주의해서 사용해야 한다.

p {
    color: blue !important; /* 항상 적용 */
}

#special {
    color: red; /* 무시됨 */
}

!important는 내부 구체성 규칙을 무시하고 자동으로 최우선 적용된다.

---

참고하면 좋은 링크

아래 링크에서 구체성 값을 계산해볼 수 있다.

• Specificity Calculator

아래 링크에서 구체성 값에 대한 좀 더 자세한 설명을 볼 수 있다.

• Specifics on CSS Specificity - CSS-Tricks