요소 선택자(Element Selector) 점수 계산하기
CSS에서는 요소의 선택자에 따라 우선순위가 나뉜다.
우선순위 가중치를 통해 스타일을 적용할 순서를 결정하지만 현재는 가중치 계산 방식이 브라우저별로 다르기 때문에 선택자의 상대 우선순위를 알아두는 것이 더 좋다.
예를 들어 기존에는 가중치가 class:10, id:100으로, class 10개가 1개의 id와 동등한 가중치를 가졌지만 현재는 가중치가 달라져 일부 브라우저에서는 256개의 class가 1개의 id와 동등한 우선 순위를 가진다. (참고:stackoverflow)
선택자는 다음과 같은 우선순위를 가진다.
!important > inline style > id > class (pseud0) > element (pseudo)
따라서 선택자별로 상대적인 가중치를 판단하여 높은 순서에 따라 왼쪽부터 comma로 구분하여 계산하는 것이 좋다.
높음inline style , id , class (pseud0) , element (pseudo) <낮음
Ex1) 0 , 1 , 2 , 1
Ex2) 0 , 0 , 200 , 10
? Ex1이 Ex2보다 가중치가 높음
예를 들어 다음과 같이 id, class 선택자가 모두 사용되는 경우 우선순위에 따라id 스타일이 적용된다.
.myMenuClass{
color:green;
}
#myMenuId{
color:red;
}
<h1 id="myMenuId" class="myMenuClass">This is it</h1>
그리고 가중치의 합산은 다음과 같다.
#myMenuId{
color:red;
}
.myMenuClass{
color:blue;
}
h1#myMenuId{
color:orange;
}
<h1 id="myMenuId" class="myMenuClass">This is it!</h1>
우선 순위를 계산해보면,
#myMenuId : 0,1,0,0 / .myMenuClass : 0,0,1,0 / h1#myMenuId : 0,1,0,1
따라서 마지막 orange color가 적용된다.
!important는 모든 가중치를 무시하고 최우선적으로 적용하는 치트키와 같다. !important가 요소에 중복되는 경우 가장 뒤에 선언된 !important가 적용된다.
하지만 !important의 사용&남용은 평화로운 생태계를 위협하는 존재가 될 수 있으므로 최대한 사용하지 않는 것이 정신 건강과 코드 구성에도 좋다.
