[css 기초] 선택자 / 선택자 우선순위 / 우선순위 계산

특정 요소를 선택하여 스타일을 적용할 수 있는 요소
HTML 페이지 안의 특정요소를 어떻게 렌더링 할 것인지 브라우저에게 알려주는 역할

 

css 선택자

css 선택자들 입니다. (빠진 요소들이 있을 수 있음!)

	예시
ID 선택자	#id { ... }
Class 선택자	.class { ... }
tag 선택자	div { ... }
속성 선택자	input[type=”text”] { ... }
전체 선택자	*
하위 선택자	div ul
자식 선택자	div > ul
인접 형제 선택자 (바로 뒤따르는 요소만)	div + ul
일반 형제 선택자 (뒤따르는 요소 전체)	div ~ ul
가상클래스 선택자 -동적선택자	::link ::visited ::active ::hover ::focus
가상클래스 선택자 -구조선택자	:root :nth-child(n) :first-child :nth-of-type(n) 등

 

선택자 우선순위

css선택자 마다 명시도 (specificity)가 다르게 계산되어 최종 스타일을 결정하게 됩니다. 더 높은 명시도를 갖는 규칙이 있으면, 낮은 명시도를 갖는 규칙은 무시됩니다.

선택자 그룹을 우선순위에 따라 내림차순으로 정리하면 다음과 같습니다.

!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상선택자 > 태그선택자 > 전체선택자

 

우선순위 계산법

선택자 우선순위는 다음의 규칙에 따라 계산합니다.

• ID 선택자의 개수를 세어서 개당 100으로 계산합니다. ( =a )
• 클래스 선택자의 개수를 세어서 개당 10으로 계산합니다. ( =b )
• 태그 선택자의 개수를 세어서 개당 1로 계산합니다. ( =c )
• 공용 선택자는 모두 0으로 계산합니다. ( =d )
• 가상 엘리먼트(before, after 등)는 무시합니다.
• 전체 선택자(*), 결합 선택자(+, ~ 등)는 우선순위에 영향을 주지 않습니다.

a + b + c + d 의 값이 높은 순서대로 스타일을 적용하는 우선순위를 가지게 됩니다.
스타일 우선순위가 같거나, 계산 방법이 없는 경우 마지막에 지정된 스타일이 우선으로 적용됩니다.

// [계산 예시]
.list_item{color:#fff; background:#000; } // 10점
.list_wrap .list_item{color:#ff0; background:#000; } // 20점
#list_cont .list_item{color:#f0f; background:#000; } // 110점
#list_cont .list_item{color:#f00; background:#0ff !important; } // 110점 (!important 적용)
#list_cont .list_item{color:#00f; background:#000;} // 110점


// [최종 스타일]
.list_item {color:#00f; background:#0ff !important;} // (!important가 적용된 css 속성이 적용됨)

// (위 스타일이 없을 경우)
.list_item{color:#00f; background:#000; } // (110점 중에서 가장 밑에있는 css 속성이 적용됨)