우선순위 - WORLD IS WIDE

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의 사용&남용은 평화로운 생태계를 위협하는 존재가 될 수 있으므로 최대한 사용하지 않는 것이 정신 건강과 코드 구성에도 좋다.

마지막으로 예외 사항도 알아보자.

우선순위 없음: *,:where()
가중치 포함하지 않음: >, ~, +
가장 높은 가중치 하나만 선택: :is(), :not()
ex) :is(#menuId, .menuId, span) -> 가중치 가장 높은 #menuId만 카운트

Tag: 우선순위