CSS 가 적용되는 우선순위

 

CSS 우선순위는 제일 높은 것에서 제일 낮은 것으로 나열한다면 !important -> inline style -> id selector -> class selector -> tag selector -> css combinators 순 이라고 할 수 있습니다.

 

우선순위

1. !important

!important 가 명시된 css 속성이 우선순위가 제일 높습니다.

.my-selector {
    background-color: #f00 !important;
}

2. inline style

그 다음으로는 inline 에 작성된 style 이 우선순위가 높습니다.

<div style="background-color: #f00;"></div>

3. id 선택자

그 다음으로는 id 선택자가 우선순위가 높습니다.

#my-selector {
    background-color: #f00;
}

4. class 선택자

그 다음으로는 class 선택자가 우선순위가 높습니다.

.my-selector {
    background-color: #f00;
}

5. tag 선택자

그 다음으로는 tag 선택자가 우선순위가 높습니다.

div {
    background-color: #f00;
}

6. CSS 연결 선택자

그 다음으로는 +, >, ~ 와 같은 CSS 연결선택자가 우선순위가 높습니다.

.dark-mode > body {
    background-color: #000;
}

 

같은 요소를 가리키고 있고 우선순위가 동일한게 존재한다면 가장 나중에 작성된 css 속성이 반영됩니다.

 

우선순위를 알아두면 좋은 점

퍼블리싱 작업 도중에 CSS 속성이 왜 반영 되지 않는지 파악해야 할 때, 혹은 CSS 관련 라이브러리나 프레임워크를 회사에 맞게 커스텀 해야 하는 상황이 발생할 수 있기 때문에 알아두는 것이 좋다고 할 수 있겠습니다.

 

참고자료

https://dev.to/one-beyond/css-selectors-priority-1cjh

CSS Selector’s priority