CSS에는 선택자 명시도라는 것이 존재한다.

선택자를 사용할때 class, id, 속성등 다양한 방식으로 요소를 선택할 수 있는데, 어떠한 선택자를 선택했냐에 따라 우선순위 점수가 존재한다.

명시도

계산 방법

link라는 클래스 이름을 가진 section 요소안에 a 태그를 선택하고 싶어 아래 두가지 선택자를 사용하였다.

어떠한 color가 적용이 될까?

// a -> 요소 -> 1점
// href -> 속성 -> 10점
// 총 11점
a[href="https://hooneylog.com"] {
	color:green;
}

// section -> 요소 -> 1점
// .link -> 클래스 -> 10점
// a -> 요소 -> 1점
// 총 12점
section.link a {
	color:red
}

아래에 있는 선택자가 총 12점으로 가장 높다. 때문에 a 의 색깔은 빨간색이 될 것이다.

결론

스타일링을 하다보면 어떠한 요소에 다양한 스타일링이 들어가는 경우도 있을것이다. 그럴때 한번씩 분명히 여기에 CSS를 적용시켰는데, 해당 CSS가 적용이 안된 상태로 렌더링이 된 경우가 있을것이다. 그럴때 이 명시도를 사용하여 내가 원하는 CSS 우선순위를 높여 적용시키도록 해야한다.

참고로 !important 를 사용하여 명시도를 override를 사용하는 방법이 있지만, 이 방법은 권장되는 방법이 아니므로 가능한 피해야한다. !important는 스타일 종속성을 무너뜨려 디버깅을 더 어렵게 만든다.