CSS 적용 순위를 (Specificity) 알아봅시다

CSS가 중복될 경우 적용 순위는?

HTML 태그에 클래스도 있고 ID도 있을 때 어떤 CSS가 먼저 적용될까요? 

 

아래와 같은 HTML 태그가 있다고 해볼께요.

<h5 class="my-class" id="my-id">H5 제목입니다</h5>

 

H5 태그는 클래스와 아이디를 모두 가지고 있네요.

아래와 같이 CSS를 적용하면 폰트의 색상은?

 

h5 {
  color: yellow;
}
 
.my-class {
  color: blue;
}
 
#my-id {
  color: red;
}

정답은 red입니다.

 

CSS는 범위가 좁고 한정적이며 구체적인 정의를 먼저 실행합니다.

위의 태그, 클래스, 아이디 중에는 아이디가 가장 범위가 좁고 그 다음 클래스, 마지막이 태그이므로

 

1. 아이디
2. 클래스
3. 태그

순으로 CSS가 적용됩니다.

 

하지만 이게 다가 아닙니다.

 

HTML 태그에 직접 style을 입힌 경우와 CSS에 !important를 붙인 경우입니다.

<h5 style="color:black" class="my-class" id="my-id">H5 제목입니다</h5>

태그에 직접 스타일을 넣으면 CSS보다 우선 순위를 가집니다.

 

하지만, !important가 가장 우선순위가 높아요.

제가 클래스 CSS에 !important를 붙였어요. 그럼 H5의 색상은 blue가 됩니다.

h5 {
  color: yellow;
}
 
.my-class {
  color: blue !important;
}
 
#my-id {
  color: red;
}

 

순위를 다시 정리해보면 아래와 같습니다.

1. !important
2. HTML에 직접 입력한 style
3. 아이디 CSS
4. 클래스 CSS
5. 태그 CSS
6. 부모로부터 상속받은 CSS

6번은 따로 얘기는 안했지만, 제일 순위가 낮답니다.

 

 

더 자세한 내용은 아래 링크를 참조해보세요.

 

https://www.w3schools.com/css/css_specificity.asp

CSS Specificity