[CSS] 의사 클래스와 CSS Specificity

의사-클래스 (psuedo-class)

의사-클래스는 클래스처럼 행동하지만 진짜 클래스는 아니다. (예) a:link 

CSS Specificity 

중복되는 여러개의 스타일 중 어느것이 우선순위가 높은가?

CSS 규칙들이 어떤 하나의 특정 요소에 적용되면서 CSS 규칙들 간의 두 개 이상의 충돌이 생길 경우, 브라우져가 더 한정적으로 선언되어 있는 특정 규칙을 따르게 되는 몇 가지 정해진 기본 적용 순위를 말한다.

a b c

a : 선택자가 id를 갖고 있는 지를 계산 (100단위)

b : 선택자가 클래스 혹은 psuedo-class를 갖고 있는 지를 계산 (10단위)

c : 선택자가 요소 이름을 갖고 있는 지를 계산 (1단위)

결과적으로 ID > 클래스 > 요소 의 순서대로 크다. 아래의 예를 보면 이해가 더 쉬워진다.

Specificity 가 더 큰 스타일이 더 작은 스타일보다 우선순위가 높아져 스타일을 덮어쓸 수 있게 된다.

/* a=0 b=0 c=0 -> specificity = 0 */
* {
    /* ... */
}

/* a=0 b=0 c=1 -> specificity = 1 */
li {
    /* ... */
}

/* a=0 b=0 c=2 -> specificity = 2 */
ul li {
    /* ... */
}

/* a=0 b=0 c=3 -> specificity = 3 */
ul li a {
    /* ... */
}

/* a=0 b=1 c=1 -> specificity = 11 */
a:hover {
    /* ... */
}

/* a=0 b=1 c=3 -> specificity = 13 */
ul li a.red {
    /* ... */
}

/* a=0 b=2 c=2 -> specificity = 22 */
li a.red:hover {
    /* ... */
}

/* a=1 b=0 c=0 -> specificity = 100 */ 
#candy {
}