[CSS] 선택자 우선 순위

 

CSS 선택자 (CSS Selector)

선택자 점수 (Selector score)

1. 전체선택자 (범용선택자) : 0점

2. type 선택자 : 1점

3. class 선택자 : 10점

4. id 선택자 : 100점

 

/* 0점 */
*{
    background-color: silver;
}
/* type 선택자 1점 */
P{
    background-color: goldenrod;
}
/* class 선택자 10점 */
.test{
    background-color: blue;
}
/* id 선택자 100점 */
#test2{
    background-color: seagreen;
}

전체 선택자 (Universal Selector) : 0점

• 모든 HTML 요소에 접근이 가능한 선택자
• * 로 표현함

*{
    background-color: silver;
}

 

타입 선택자(Type Selector) : 1점

• 태그 이름을 사용해서 나타냄
• 해당 태그에 해당하는 모든 속성에 적용된다
• 주로 reset 작업 할때 사용

P{
    background-color: goldenrod;
}

 

클래스 선택자 (Class selector) : 10점

• 다수의 클래스에 적용하는게 가능한다.
• CSS를 컨트롤하는데 많이 사용된다
• . 으로 표현한다

.test{
    background-color: blue;
}

 

id 선택자 (id seclecor) : 100점

• 고유 아이디만을 가지고 있는 요소를 식별할때 사용한다
• 자바스크립트 컨트롤에서 많이 사용한다.
• 같은 페이지에서 같은 id는 중복 금지

#test2{
    background-color: seagreen;
}

---

선택자 3가지 우선순위 원칙

• 후자 우선의 원칙
• 구체성의 원칙
• 중요성의 원칙

 

후자 우선의 원칙

동일한 선택자가 연속으로 사용된 경우 후자가 우선순위를 가짐

P{
    background-color: goldenrod;
}
P{
    background-color: red;
} /* red 색상이 표시됨*/

 

구체성(specificity)의 원칙

specificity : 구체성은 '특이성, 명시도'로 표현 하기도 함

 

가중치

어떤 선택자가 더 구체적인지(명시적인지) 판단할때 가중치를 기준으로 판단한다.

id > class > 타입

 

* id와 class가 둘 다 지정되어있지만 id 선택자가 class 선택자 보다 가중치가 더 높아서 black 컬러가 반영되었다.

 

우선 순위 계산

위 이미지의 ul#primary-nav li.active의 점수는?

ID 선택자 100점 + Class 선택자 10점 + 2개의 Type 선택자 2점 => 총 112점

 

다른 예시

클래스 1개 vs 타입 12개