[CSS] 선택자(selector) 우선순위, 명시도(specificity), !important

보통 하나의 요소(element)에는 여러 스타일 속성이 설정되어 있는 경우가 많다.

브라우저는 그렇게 설정된 속성들 중 어떤 속성을 우선적으로 적용할지를 계산한다.

 

먼저 선택자끼리 비교했을 때 우선순위가 높은 순대로 정리하자면 다음과 같다.

 

1. CSS 선택자 우선순위

1. !important
2. 인라인 스타일(HTML에서 직접 스타일 준 경우 style="")
3. ID 선택자(#example)
4. 클래스 선택자(.example), 속성 선택자([type="radio"]), 의사 클래스 선택자(:hover)
5. 유형 선택자(h1), 의사 요소(:before)
6. 부모 요소에 의해 상속된 속성

(선택자에 대해서 잘 모르겠다면
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors를 먼저 참고하자)

 

그런데 상황에 따라 이 우선순위를 적용하기 어려울 수 있다. 예를 들어

#myDiv li.myClass input[type="radio"] {
  /* 속성 */
}

#divitis #myDiv input {
  /* 속성 */
}

이렇게 선택자들이 혼합되어 있는 경우엔 애매하다고 느낄 수 있다.

 

그런데 어떻게 계산하는지 Docs를 찾아보니

명시도란 개념이 있고 이를 계산하는 방식이 따로 있었다.

 

 

2. 명시도(Specificity)

명시도는 주어진 CSS 선언에 적용되는 가중치로,

일치하는 선택자 내 각 선택자 유형의 수에 의해 결정된다.

여러 선언이 명시도가 같은 경우, CSS에서 맨 끝에 오는 선언이 요소에 적용된다.

 

앞에서 말한 CSS 선택자 우선순위가 높을수록

명시도를 크게 증가시킨다(가중치가 높다).

(ID 선택자 > 클래스/속성/의사 클래스 선택자 > 유형 선택자, 의사 요소)

 

그리고 브라우저는 명시도가 가장 큰 속성을 요소에 적용시킨다. 예를 들어

#myDiv li.myClass input[type="radio"] {
  /* ID 선택자 1개 */
  /* 클래스/속성/의사클래스 선택자 2개 */
  /* 유형 선택자 2개 */
}

#divitis #myDiv input {
  /* ID 선택자 2개 */
  /* 클래스/속성/의사클래스 선택자 0개 */
  /* 유형 선택자 1개 */
}

앞에서 든 예시의 경우 선택자 유형의 수를 세어보면 

전자는 1-2-2, 후자는 2-0-1로 볼 수 있다.

 

이럴 경우 ID 선택자의 수가 더 많은 후자의 속성이 적용된다.

 

밑의 그림은 명시도를 계산하는 예를 보여주는데

이해하는데 도움이 될 것 같아 가져왔다.

 

 

출처:https://specifishity.com/

 

 

그리고 전역 선택자(*), 조합자(+, >, ~, ' ', ||) 및 부정 의사 클래스(:not())는 

명시도에 영향을 주지 않는다고 한다. (:not() 내부에 선언한 선택자는 영향을 끼침)

 

여기서 잠깐 CSS 스타일 적용 우선순위를 말하고 넘어가자면 

1. 인라인 스타일 (inline style - style="")
2. 내부 적용 스타일 (internal style - <style></style>)
3. 외부 적용 스타일 (external style - css 파일)

 

순으로 높다. 그래서 요소에 추가한 inline style의 경우

항상 외부 스타일시트의 스타일을 덮어쓰므로 명시도가 가장 높다고 볼 수 있다.

 

3. !important 예외

하지만 가장 높은 우선순위를 갖는 것은 !important 규칙이 사용된 경우이다.

물론 똑같이 !important 규칙이 사용됐다면 더 큰 명시도를 갖는 선언이 적용된다. 

#myDiv li.myClass input[type="radio"] {
  border-color: pink;
}

#divitis #myDiv input {
  border-color: black;
}

input {
  border-color: red !important;
}

이 예시도 위의 두 경우가 더 큰 명시도를 갖지만 

아래의 경우에서 !important 규칙이 사용되었기 때문에 아래 속성이 적용된다.

 

Docs에 따르면

!important 자체는 명시도와 아무 관련이 없지만 명시도에 직접 영향을 미친다고 되어 있다.

이는 스타일시트 내에 자연스러운 종속을 깨뜨려 디버깅을 어렵게 만드는 나쁜 습관이라고 말한다.

 

그래서 외부 라이브러리 CSS나 인라인 스타일을 재정의할 때만 사용하고

나머지는 절대 쓰지 말라고도 되어 있다.

 

 

 

 

참고

명시도 - CSS: Cascading Style Sheets | MDN