명시도

개념

명시도(specificity)는 브라우저가 어떤 CSS 속성값이 요소와 가장 관련이 있고 따라서 적용되는 지를 결정하는 수단입니다. 명시도는 다른 종류의 CSS 선택자로 구성되는 일치(matching) 규칙에 기반합니다

어떻게 계산되는가?

명시도는 주어진 CSS 선언에 적용되는 가중치(weight)로, 일치하는 선택자 내 각 선택자 유형의 수에 의해 결정됩니다. 명시도가 여러 선언이 같은 경우, CSS에서 발견된 맨 끝 선언이 요소에 적용됩니다. 명시도는 같은 요소가 여러 선언의 대상이 되는 경우에만 적용합니다. CSS 규칙에 따라 직접 대상 요소는 항상 요소가 부모로부터 상속받는 규칙보다 우선합니다.

주의: 문서 트리 내 요소의 근접도(proximity, 가까움)는 명시도에 영향을 주지 않습니다.

선택자 유형

다음 선택자 유형 목록은 명시도가 증가하는 것입니다:

type 선택자(가령 h1) 및 가상 요소(pseudo-element)(가령 :before).
class 선택자(가령 .example), attributes 선택자(가령 [type="radio"]) 및 가상 클래스(pseudo-class)(가령 :hover).
id 선택자(가령 #example).

universal 선택자(*), 조합자(combinator)(+, >, ~, ' ') 및 부정(negation) 가상 클래스(:not())는 명시도에 영향을 주지 않습니다. (그러나, :not() 내부에 선언된 선택자는 줍니다.)

요소에 추가된 인라인 스타일(가령 style="font-weight:bold")은 항상 외부 스타일시트의 모든 스타일을 덮어쓰고 따라서 가장 높은 명시도를 갖는 것으로 생각될 수 있습니다.

!`important` 예외

important 규칙이 스타일 선언에 사용된 경우, 이 선언은 다른 선언을 재정의(override)합니다. 비록 엄밀히 말해 !important가 명시도와 아무 관련이 없더라도, 직접 상호 작용합니다. !important 사용은 나쁜 습관이고 스타일시트 내 자연스러운 종속을 깨뜨려 디버깅을 더 어렵게 만들기에 피해야 합니다. !important 규칙으로 충돌하는 두 선언이 같은 요소에 적용된 경우, 더 큰 명시도를 갖는 선언이 적용됩니다.

일부 경험 규칙(rules of thumb):

항상 !important를 고려하기 전에 명시도 사용법을 찾으세요.
사이트 전반(site-wide) 또는 외부 CSS (Bootstrap 또는 Normalize.css 같은 외부 라이브러리에서)를 재정의하는 페이지 전용 CSS에만 !important를 쓰세요.
plugin/mashup을 작성할 때 !important는 절대 쓰지 마세요.
사이트 전반 CSS에는 !important를 절대 쓰지 마세요.

!important 사용 대신에, 다음과 같이 할 수 있습니다:

CSS 종속(cascading) 속성을 더 잘 쓰세요.
더 명시된(명확한) 규칙을 쓰세요. 선택 중인 요소 앞에 하나 이상의 요소를 나타냄으로써 규칙은 더 명확해지고 더 높은 우선 순위를 얻습니다:
```
<div id="test">
    <span>Text</span>
</div>
```
```
div#test span { color: green }
div span { color: blue }
span { color: red }
```

순서에 상관없이, 규칙이 더 명확하기에 text는 녹색이 됩니다. (또한, blue 용 규칙은 red 용 규칙을 덮어씁니다, 규칙의 순서에도 불구하고)

다음 경우에 사용해야 합니다:

A) 시나리오 하나:

전체적으로 사이트의 시각적 측면을 설정하는 전역 CSS 파일이 있습니다
당신(또는 타인)이 아주 나쁜 습관인 요소 자체에 인라인 스타일을 사용합니다

이 경우에, 전역 CSS 파일의 특정 스타일을 요소에 바로 설정한 인라인 스타일을 재정의하는 important로 설정할 수 있습니다.

실제 예: 일부는 서툴게 작성된 인라인 스타일을 사용하는 jQuery plugins.

B) 또 다른 시나리오

#someElement p {
    color: blue;
}

p.awesome {
    color: red;
}

#someElement 내부 단락이라도 awesome 단락을 항상 red로 어떻게 바꿀까요? !important가 없으면, 첫 번째 규칙은 명시도를 더 갖고 두 번째 규칙을 이깁니다.

!important를 재정의하는 법

A) 간단히 !important에 다른 CSS 규칙을 추가하고 선택자에 더 높은 명시도(선택자에 tag, id 또는 class 추가)를 주거나 같은 선택자에 기존 것보다 더 나중 시점에 CSS 규칙을 추가하세요. (동점에서, 끝에 정의된 규칙이 이깁니다).

더 높은 명시도를 갖는 일부 예:

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

B) 또는 기존 규칙 다음에 같은 선택자를 추가하세요:

td {height: 50px !important;}

C) 혹은 !important의 사용을 피하기 위해 원 규칙을 전부 재작성하세요.

자세한 정보는, 다음을 방문하세요:

https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

https://stackoverflow.com/questions/11178673/how-to-override-important

https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

`:not` 예외

부정 가상 클래스 :not은 명시도 계산에서 가상 클래스로 고려되지 않습니다. 하지만 부정 가상 클래스 내에 놓인 선택자는 선택자 유형의 수를 결정할 때 일반 선택자로 셉니다.

여기 CSS 조각이 있습니다:

div.outer p {
  color:orange;
}
div:not(.outer) p {
  color: lime;
}

다음 HTML이 사용될 때:

<div class="outer">
  <p>This is in the outer div.</p>
  <div class="inner">
    <p>This text is in the inner div.</p>
  </div>
</div>

다음과 같이 화면에 보입니다:

This is in the outer div.

This text is in the inner div.

형태 기반 명시도

명시도는 선택자의 형태(form)를 기반으로 합니다. 다음 경우에, 선택자 *[id="foo"]는 선택자의 명시도를 결정하기 위한 목적으로 attribute 선택자로 셉니다(count), 비록 id를 선택할 지라도.

다음 스타일 선언이:

*#foo {
  color: green;
}
*[id="foo"] {
  color: purple;
}

이 마크업에 사용될 때:

<p id="foo">I am a sample text.</p>

다음처럼 보이게 됩니다:

I am a sample text.

같은 요소와 일치하지만 id 선택자는 더 높은 명시도를 갖기 때문입니다.

트리 근접도 무시

요소와 주어진 선택자로 참조된 다른 요소와의 근접도(proximity)는 명시도에 영향을 주지 않습니다. 다음 스타일 선언은:

body h1 {
  color: green;
}
html h1 {
  color: purple;
}

다음 HTML로:

<html>
<body>
  <h1>Here is a title!</h1>
</body>
</html>

아래와 같이 렌더링됩니다:

Here is a title!

두 선언 선택자 유형 셈(count)이 같지만 html h1 선택자가 나중에 선언되었기 때문입니다.

직접 대상 요소 대 상속된 스타일

직접 대상 요소를 위한 스타일은 항상 상속된 스타일보다 우선권을 갖습니다, 상속된 스타일의 명시도에 관계없이.

#parent {
  color: green;
}
h1 {
  color: purple;
}

다음 HTML로:

<html>
<body id="parent">
  <h1>Here is a title!</h1>
</body>
</html>

또한 다음과 같이 렌더링합니다:

Here is a title!

h1 선택자는 요소를 명시해서 대상으로 삼지만 green 선택자는 오직 부모에서 상속되기 때문입니다.

참조

CSS3 선택자 명시도 - https://www.w3.org/TR/selectors/#specificity
CSS Key Concepts: CSS syntax, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, used and actual values. Definitions of value syntax, shorthand properties and replaced elements.

개념