우선순위

같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다.

 

1. 명시도 점수가 높은 선언이 우선 (명시도)
2. 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선 (선언 순서)
3. 명시도는 '상속' 규칙보다 우선 (중요도)
4. !important 가 적용된 선언 방식이 다른 모든 방식보다 우선 (중요도)

 

1. 가장 중요 (!important)

• 모든 선언을 무시하고 가장 우선
• 점수: ∞ pt

div { color: red !important; }  /* 가장 우선 */

 

2. 인라인 선언 방식

• 인라인 선언 (HTML style 속성을 사용)
• 점수가 높기 때문에 유지보수에 제약이 많다. (비추천)
• 점수: 1,000 pt

<div style="color: orange;">Hello world!</div>    <!--1,000 pt-->

 

3. 아이디 선택자

• 고유한 선택자일수록 점수가 높다.
• 점수: 100 pt

#color_yellow { color: yellow; }     /* 100 pt */

 

4. 클래스 선택자

• 점수: 10 pt

.color_green { color: green; }      /* 10 pt */

 

5. 태그 선택자

• 점수: 1 pt

span { color: blue; }    /* 1 pt */

 

6. 전체 선택자

• 점수: 0 pt

* { color: darkblue; }     /* 0 pt */

 

7. 상속

• 상속받은 속성은 항상 우선하지 않음
• 점수: 계산하지 않음

body { color: violet; }

 

예시

우선도 점수를 계산해보자!

.list li .item { color: red; }     클래스(10)+태그(1)+클래스(10) = /* 21 pt */
.list li:hover { color: red; }     클래스(10)+태그(1)+클래스(10) = /* 21 pt */
.box::before { content: "Good"; color: red; }     클래스(10)+태그(1) = /* 11 pt */
#submit span { color: red; }     아이디선택자(100)+태그(1) = /* 101 pt */     
header .menu li:nth-child(2) { color: red; }    태그(1)+클래스(10)+태그(1)+클래스(10) = /* 22 pt */
h1 { color: red; }    태그(1) = /* 1 pt */
:not(.box) { color: red; }   부정(-)+클래스(10) = /* 10 pt */
:not(span) { color: red;}    부정(-)+태그(1) = /* 1 pt */

• :hover 처럼 '가상 클래스'는 클래스 선택자의 점수 10pt 를 가진다.
• ::before 처럼 '가상 요소'는 태그 선택자의 점수 1pt 를 가진다.
• 부정 선택자 :not( ) 은 점수를 가지지 않는다.