[Frontend Interview] CSS 선택자의 특정성은 무엇이고 어떻게 작동하는가?

브라우저는 CSS 선택자의 특정성에 따라 Element에 표시할 스타일을 결정한다.

CSS 선택자는 4개의 쉼표로 구분된 값 a,b,c,d 을 기반으로 계산된다.

 

1. a는 인라인 스타일이 사용되고 있는지 여부이다.
속성의 선언이 인라인 스타일이라면, a는 1, 아니면 0이다.

2. b는 ID 셀렉터의 수

3. c는 클래스, 속성, 가상 클래스 선택자의 수

4. d는 태그, 가상 요소 선택자의 수이다.

 

결과적으로 css 셀렉터는 점수가 아니라, 4개의 값을 비교하여 가장 높은 특정성을 갖는 항목을 적용한다.

a,b,c,d에서 0,1,0,0와 0,0,10,10 이 있다면 0,1,0,0이 우선적으로 반영된다는 것이다.

 

동등한 특정성의 경우에는, 가장 마지막 규칙이 중요한 규칙이라 판단한다.

(중복으로 스타일을 사용할 때, 스타일 시트의 하위 규칙이 반영될 Element에 더 가깝기 때문이다.)

 

+ CSS UI 컴포넌트 라이브러리 코드를 작성할때 !important를 사용하거나 특정성을 높이기 위해 지나치게 복잡한 CSS 규칙을 

사용하지 않아도 재정의 할 수 있도록 특정성을 낮게하는 것이 중요하다.