CSS 선택자의 우선순위

요약

• !important: 속성 기준으로 가장 우선시됩니다.

• 인라인 선언 방식: 요소 기준으로 가장 우선됩니다.

• id 선택자: 100점

• class 선택자, 속성 기반 선택자, 가상 클래스, 가상 요소: 10점

• 태그 선택자: 1점

• 전체 선택자, 부정 선택자: 0점

CSS 선택자의 우선순위

적용 순서에 따른 우선순위 규칙

1. 선택자 점수를 합산해 점수가 높은 선언을 우선하지만, 점수가 같으면 가장 마지막에 해석(작성)된 선언이 우선함

2. 결합 관계(복합 선택자 패턴)의 경우는 결합되는 선택자 방식의 정해진 점수를 합산하여 우선 순위를 정한다.

3. !important를 사용해서 가장 우선적으로 적용이 가능하다.

4. 같거나 서로 다른 선택자 방식으로 동일 요소에게 동일 속성을 뒤쪽에서 다른 값으로 재정의할 수 있다.

5. 서로 나누어진 CSS 코드인 경우 HTML 문서에 적용되는 순서에 따라 뒤쪽에서 동일 요소에게 동일 속성을 재정의 할 수 있다.

6. 선택자의 종류에 따른 우선 순위 규칙(1항보다 우선)
• 주요 단일 선택자 방식에서 id, class, tag 순의 우선 순위
• 우선 순위 규칙에 의해 경우에 따라 뒤쪽에서 동일 속성을 재정의 할 수 없다.

점수 매기는 방법

• !important : 속성 기준 가장 우선

color: red !important;

• 인라인 선언 방식 : 요소 기준 가장 우선

<div>
	<p style="color: red;">Contents</p>
</div>

• id 선택자 : 100점

#name {}

• class 선택자, 속성 기반 선택자, 가상 클래스, 가상 요소 : 10점

/* class 선택자 */
.name {}

/* 속성 기반 선택자 */
a[href*=”#”] {}

/* 가상 클래스 */
a:hover {}

/* 가상 요소 */
span::after {}

• 태그 선택자 : 1점

p {}

• 전체 선택자, 부정선택자 : 0점

/* class 선택자 */
* {}

/* class 선택자 */
:not(p) {}

점수 계산 예시

/* class + tag + class = 10+1+10 = 21 */
.list li.item {}

/* not + class = 0+10 = 10 */
:not(.box){}

참고한 사이트