CSS에서 selector 우선순위 계산하기

CSS를 사용하다보면 같은 엘리먼트에 대해 여러곳에서 선언하는 경우가 있다.
예를 들자면 다음과 같은 경우.

[html]
li {color:#A00;}
.list_item {color:#0A0;}
#item_1 {color:#00A;}
...

hello

...
[/html]

이런 경우, 어떤 셀렉터가 우선될 것인가.

이에 대해서는 다음과 같은 공식이 있다.

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

1) inline 스타일 (style="")은 무조건 최상위이다. (a = 1, inline 스타일을 사용하지 않으면 a = 0)
2) id selector 갯수를 b라 한다.
3) class selector와 pseudo selector 갯수를 c라 한다.
4) 엘리먼트의 갯수를 d라 한다.
5) abcd의 조합이 큰 순서로 우선순위가 결정된다.

예를 들어,
li {...} : 0001
ul li {...} : 0002
ul li ul li {...} : 0004
.list_item {...} : 0010
li.list_item {...} : 0011
.menu_list .list_item {...} : 0020
ul.menu_list li.list_item {...} : 0022
ul#main_menu li.list_item {...} : 0112
ul#main_menu li.list_item div.item_label img : 0124

간단히 말하자면, 좀더 상세화시킬 수록 높은 순위로 CSS가 적용된다는 뜻이다.

이를 이용해서 모듈별 CSS관리가 가능한데,
즉, 중간정도의 우선순위로 모듈별 CSS를 적고, 나중에 페이지에 적용할 때에는 그보다 높은 우선순위로 페이지별 CSS를 적어주게 되면 모듈별 CSS의 수정 없이 원하는 디자인 대로 페이지별 CSS에 따라 적용시킬 수 있다는 뜻이다.

참조 : http://www.w3.org/TR/CSS21/cascade.html#specificity