[css 개념] cascading

개요

혼자 온라인 강의를 보며 css를 공부했을 때는 cascade의 의미를 정확하게 이해하지 못했다. 막연하게 Selector가 더 정확한 것. 더 아래에 작성된 것이 우선순위가 높다는 지식만 가지고 있었다. specificity의 개념을 모르고 있었던 것이다.

 

cascading

mdn에서 cacading에 대한 설명은 아래와 같다.

 

The cascade is an algorithm that defines how user agents combine property values originating from different sources.

즉, 최종적으로 요소에 적용이 되는 스타일을 어떻게 정하는 가에 대한 알고리즘이다.

만약 서로 같은 요소를 가리키는 selector의 property가 겹친다면 어떤 것을 적용하는 가에 대한 답이 cascading이다. 

그 기준으로 (css 선언 위치, specificity)가 있다.

 

Specificity

specficity라는 개념은 어떤 selector가 더 구체적인지 판단하는 기준이 된다.

https://specificity.keegan.st/

Specificity Calculator

위 사이트에 들어가면 specificity를 계산할 수 있다.

 

specificity가 높은 selector가 우선순위가 더 높다.

specificity는 3가지의 값이 있으며 (1,0,0) > (0,100,0) 이다. class selector는 아무리 노력해도 id selector 보다 우선순위가 낮다