[Specificity] 특수성: (0,1,0) 파헤치기

 

크롬 개발자 도구에서 css 부분에 마우스를 가져다 대면

아래와 같은 모습을 보여준다.

 

특수성(영어로는 Specificity)과 의문의 괄호 안 숫자들, 무엇을 나타내고 있는걸까?

결론부터 말하자면, 아래와 같다.

 

(id 선택자 수, class 선택자 수, 요소 선택자 수)

 

이는 css 우선순위 관련된 표시로 볼 수 있다.

#iu {
	background-color: red;  // (1, 0, 0)
}

.eight {
	background-color: wheat; // (0, 1, 0)
}

.eight div div {
	background-color: black; // (0, 1, 2)
}

 

 

 

위와 같이 하나의 id 선택자 수가 있으면  (1, 0, 0) 이고,

하나의 클래스 선택자가 있다면 (0, 1, 0) 이다.

3번째는 요소선택자 2개가 추가되었기에 (0, 1, 2) 로 표기해준다.

 

추가로 3개가 같은 요소를 보고 있다면 

어떤 css가 적용될까?

우선순위는 숫자 표기의 순서와 같다.

그렇기에 가장 앞의 숫자가 높은 #iu 가 반영된다.

(뒤의 숫자는 커도 무의미하다!)