CSS를 다시 쭉 복습하고 있는데 그동안 명시도 개념이 제대로 안잡혀있었던 것이 그동안 겪은 CSS 문제의 원인이 된 경우가 많다는 깨달음을 얻었다. 그래서 정리!

명시도는 무엇인가

CSS에서 스타일 규칙 간 우선순위이다. 스타일 규칙 충돌을 해결하는 데에 사용된다.

예를 들어서 이 포스팅을 쓰기 전에 헷갈려했던 CSS 코드 스니펫.

.my-class {
  color: blue;
}

h1 {
  color: green;
  background-color: red;
}

h1 {
  color: white;
  background-color: yellow;
}

여기서 퀴즈.
my-class라는 클래스가 적용된 h1 태그가 있을 때 글자색과 배경색은?

정답!
글자색은 blue
배경색은 yellow

이제는 공부해서 알지만 오늘 명시도를 공부하기 전까지만 해도 정답을 몰랐다.

그럼 정답이 왜 이런가?

배경색이 좀 더 간단하니 배경색부터 보자.
브라우저의 렌더링 엔진은 CSS코드를 위에서부터 한 줄 씩 읽기 때문에 background-color가 red로 선언되었다가 yellow로 재선언되면 CSSOM에 있는 h1 태그의 색을 재선언된 색상으로 변경한다. 이를 뒤의 규칙이 앞의 규칙을 override한다고 표현할 수 있다.

아니 그럼 왜 color는 white가 더 아래에 있는데 답은 blue죠?

이유는 class 선택자의 명시도가 태그 선택자보다 높기 때문이다.

명시도 순서대로 나열해보자면 아래와 같다.

<----[높다]----!important----인라인 스타일----ID 선택자----클래스 및 속성 선택자----태그 선택자----[낮다]--

이건 CSS에서 이미 정해진 규칙이다. 위의 순서를 보면 클래스가 태그 선택자보다 명시도가 높기 때문에 클래스 선택자로 color: blue로 지정한 것이 우선적으로 선택된다는 것을 알 수 있다.

!important는 우선순위가 가장 높기 때문에 히든카드로 급할 때 사용하면 좋다. 하지만 남발하게 되면 정작 급할 때 안 먹을 우려가 있기 때문에 아주 급할 때 사용하고 웬만하면 사용하지 않는 것이 좋다. 앞에 있는 ! 때문에 처음에 안중요한 곳에 사용하는 것인줄 알았는데 여기서 !는 부정의 의미가 아니기 때문에 헷갈리면 안된다.