[CSS] Specificity (명시도)

CSS Specificity

같은 element에 두 개 이상의 CSS 규칙이 중복으로 적용될 수가 있다. 이러한 경우에는 CSS Specificity 또는 명시도 값이 높은 Selector의 스타일이 적용된다. Specificity 값이 높은 순서대로 정리하면 다음과 같다.

 

1. Inline Styles: 1000, 예) <h1 style='color:red;'>
2. ID: 100, 예) #h1
3. Classes, pseudo-classes, attribute selectors: 10, 예) .text, :hover, [href]
4. Elements, pseudo-elements: 1, 예) h1, :before

만약 명시도 값이 동일하다면 나중에 선언된 스타일이 적용된다.

명시도 계산

하나의 Selector에서 명시도 값을 계산하는 방법은 위 리스트에서 각각의 Selector에 맞는 명시도 값들을 더해주면 된다.

 

• p.test: 엘리멘트 Selector와 ID Selector 가 있기 때문에 명시도 값은 1 + 10 = 11이다.
• #class1 h1#class2: Class Selector 2개와 ID Selector 가 있기 때문에 시도 값은 100 + 1 + 100 = 201이다.

!important

명시도 값과 상관없이 무조건 스타일을 적용하고 싶을 때는 해당 속성 뒤에 !important를 붙이면 된다.

h1{
    color: red !important;
}

h1 {
    color: blue;
}

원래는 나중에 선언된 color: blue가 적용되어야 하지만 color: red 에 !important가 있기 때문에 h1의 폰트 색은 빨간색이 된다.