[CSS] 선택자 우선순위 계산

거시적으로 따지면 tag와 가까울 수록 우선 순위가 높다고 할 수 있다.

인라인CSS(태그 요소로 들어 있는 style) > 내부CSS(head 영역에 들어가 있는 style) > 외부CSS(html 밖에 있는 css 파일)

이런 원리에 의해서 style 태그 내부 가장 아래에 있는 선택자가 우선시 되는 것이다.

 

그런데 이렇게 단순하게 해소가 된다면 얼마나 좋겠냐만 실제로 그렇지 않다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/Specificity

https://specifishity.com/ -> MDN에서 redirect해준 쉽게 이해할 수 있는 예제

 

가중치 점수 계산을 통해 우선순위가 정해진다.

가중치 점수 

!important >>>> style attribute(inline) > id > class > element > *(전체 선택자)

!important: 절대적 우선 순위 1-0-0-0-0점>>>>>>

inline-style(style attribute in element): 1-0-0-0점 >

id(#[id명]) : 0-1-0-0점 >

class(.[class명]), 속성 선택자([attrname]), 가상클래스(:[pseudo-class명]) : 0-0-1-0점 >

요소(보통 tag가 될 것 같다), 가상요소(::[pseudo-element명]) : 0-0-0-1점 > 

전체 선택자(*): 0-0-0-0점

 

각 선택자들(ex. p#name, a.myhomepage 등)이 가진 가중치를 더해서 점수가 높은 애들부터 우선순위가 매겨진다.

 

특히 기억하고 주의할 것

!important

는 개인 프로젝트에 사용하지 말 것! -> !important를 쓰는 행위 자체가 자신이 프로젝트를 이해하지 못하고 있음을 방증하는 것이다.

면접에 들어가서 "여기에 important를 왜 넣었나요? 이 프로젝트 설명 좀 해볼래요?" 질문 받기 싫으면 알아서 잘 하자^^

 

+21.11.04 + 추가

class 11개 vs id 1개+class 1개 

→ id 포함된게 우선순위 더 높다

 

상속까지 생각해야 된다🤮 css 책에서는 선택자 가중치 점수 계산법만 30페이지가 넘는단다..^^