jQuery의 선택자의 우선순위

jQuery의 선택자의 우선순위

CSS에서 선택자의 우선순위는 스타일이 적용되는 순서를 결정합니다. 복잡한 웹 페이지에서는 여러 CSS 규칙이 동일한 요소에 적용될 수 있으며, 이러한 경우 선택자의 우선순위가 중요해집니다. 선택자의 우선순위는 가중치(specificity)를 기반으로 결정되며, 다음과 같은 순서로 평가됩니다.

우선순위 순서

1. 중요도(Importance)
   

   • !important가 적용된 스타일이 가장 높은 우선순위를 가집니다.
     
2. 소스순서(Source Order)
   
   • CSS 코드 내에서 나중에 선언된 스타일이 이전에 선언된 스타일을 덮어씁니다. 이는 같은 우선순위를 가진 경우에만 적용됩니다.
     
3. 가중치(Specificity)
   
   • 가중치가 높은 선택자가 낮은 선택자보다 우선합니다. 가중치는 다음과 같이 계산됩니다.
     

가중치 계산

가중치를 비교할 때, 왼쪽에서 오른쪽으로 비교하며, 각 위치에서 더 높은 숫자를 가진 선택자가 우선합니다. 예를 들어, 0,1,0,0(아이디 선택자)은 0,0,10,10(10개의 클래스 선택자와 10개의 태그 선택자)보다 우선합니다.

• 인라인 스타일(HTML 내의 style 속성 사용): 1,0,0,0
  
• 아이디 선택자(#id): 0,1,0,0
  
• 클래스 선택자(.class), 속성 선택자([type=”text”]), 가상 클래스(:hover): 0,0,1,0
  
• 태그 선택자(div), 가상 요소(::before): 0,0,0,1
  
• 전체 선택자(*), 관계 선택자(+, >, ~, )는 가중치에 영향을 주지 않습니다.
  

아래의 코드에서, 만약 여러 규칙이 동일한 요소에 적용된다면 #navbar가 가장 높은 가중치를 가지므로 그 스타일이 적용됩니다.

코드	설명
#navbar { background-color: blue; }	가중치: 0,1,0,0
div.navbar { background-color: green; }	가중치: 0,0,1,1
.nav { background-color: red; }	가중치: 0,0,1,0
div { background-color: yellow; }	가중치: 0,0,0,1
*{ background-color: black; }	가중치: 0,0,0,0