선택자 우선순위

우선순위란?

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

우선순위 적용 방법

두가지의 방법이 있습니다.

1. 점수가 높은 선언의 우선순위가 높습니다.
2. 점수가 같다면, 가장 마지막에 해석된 (나중에 작성된) 선언의 우선순위가 높습니다. (덮어쓴다고 생각하면 됩니다.)

여기서 점수는 어떻게 적용할까요?

선택자들의 점수

1. important (9999999999점)
2. Inline style (1000점)
3. ID 선택자 (100점)
4. Class 선택자 (10점)
5. Tag 선택자 (1점)
6. *(전체) 선택자 (0점)
7. 상속 ⇒ 상속이 가능하지만 별도로 점수를 계산하지 않습니다.

점수계산 예시

.list li.item{
}

Class(10) + Tag(1) + Class(10) = 21점

 

.list li:hover

Class(10) + Tag(1) + Virtual Class(10) = 21점

hover는 가상 클래스 선택자이기 때문에 10점을 부여합니다.

 

box::before {
}

Class(10) + Tag(1) = 11점

before는 가상요소이기 때문에 태그 선택자로 보아 1점을 부여합니다.

 

:not(.box){
}

.box : Class(10) = 10점

not은 해당 요소를 부정하는 것이기 때문에 선택자이긴 하지만 점수로 계산하지 않습니다.

 

.hello {
	color : blue;
}

.hello {
	color : orange;
}

클래스 선택자로 각 10점인데 orange가 더 나중에 작성되었으므로 orange 스타일이 적용됩니다.

 

결론

개발할때 왜 원하는대로 CSS가 적용이 안되는건지 이유도 모르고 그냥 맨땅에 헤딩 했었는데 선택자 우선순위에 대한 공부를 통해 선택자들의 우선순위를 잘 고려해서 스타일이 왜 적용안되는지 확실히 파악하고 개발할때 사용할 수 있을 것 같습니다.