[CSS] CSS 선택자 우선순위

선택자 우선순위

선택자 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다.

 

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

1. 같거나 서로 다른 선택자 방식으로 동일 요소에게 동일 속성을 뒤쪽에서 다른 값으로 재정의할 수 있다.
2. 서로 나누어진 CSS 코드인 경우 HTML 문서에 적용되는 순서에 따라 뒤쪽에서 동일 요소에게 동일 속성을 재정의 할 수 있다.
3. 선택자의 종류에 따른 우선 순위 규칙
   • 주요 단일 선택자 방식에서 id, class, tag 순의 우선 순위
   • 우선 순위 규칙에 의해 경우에 따라 뒤쪽에서 동일 속성을 재정의 할 수 없다.
4. 결합 관계(복합 선택자 패턴)의 경우에는 결합되는 선택자 방식의 정해진 점수를 합산하여 우선 순위를 정한다.
5. !important를 사용해서 가장 우선적으로 적용이 가능하다.

 

선택자 점수 매기기

선택자	적용 예시	점수
!important	속성 : 적용 값 !important;	9999999999
inline 스타일	style="background-color:red;"	1000
ID 선택자	#selector	100
class 선택자	.selector	10
속성 기반 선택자	[href="#"]	10
가상 클래스	:hover	10
가상 요소	::after	1
태그 선택자	a	1
전체 선택자	*	0

• 부정선택자 :not()은 가상 클래스 선택자이지만 점수를 가지지 않고 () 안 선택자만 점수를 가진다.

 

예제

.list li.item {}
.list li:hover {}
.box::before {}
#submit span {}
header .menu li:nth-child(n) {}
h1 {}
:not(.box) {}
:not(a) {}

• .list(10) + li(1) + .item(10) = 21
• .list(10) + li(1) + :hover(10) = 21
• .box(10) + ::before(1) = 11
• #submit(100) + span(1) = 101
• header(1) + .menu(10) + li(1) + :nth-child(n)(10) = 22
• h1(1) = 1
• :not()(0) + .box(10) = 10
• :not()(0) + a(1) = 1