[CSS] !important 란?

!important란?

 

 

CSS 코드를 살펴보다보면, 속성값에 !important를 어쩌다 한번쯤은 목격했을 것이라 생각됩니다.

!important는 선택자의 우선순위 중에서도 가장 최우선으로 적용하고 싶을 때 사용됩니다. 인라인 스타일, id selector, class selector보다도 최최최최최우선 순위로 CSS를 입히고 싶을 때 사용합니다.

사용 방법은 속성값에 !important만 붙여주면 됩니다.

 

[ CSS 적용 우선순위 ]

!important > id > class , 가상클래스 > 요소

 

1. [예제]

• id가 first인 h1 요소들이 있습니다.
• 어떤 CSS를 적용했든 h1의 첫번째 요소를 파란색으로 입히고자 합니다.

      

      

      

    
    

      <css />
    
<h1 id="first">begin CSS1</h1>
<h1>begin CSS2</h1>
<h1>begin CSS3</h1>
<h1>begin CSS4</h1>
<h1>begin CSS5</h1>

2. [CSS]

• id가 first인 CSS는 노란색 폰트로 지정했습니다.
• h1 요소중 첫번째 가상클래스 = :first-child 의 색상은 파란색으로 지정했습니다.

여기에서, id가 가상클래스보다 우선순위가 높아서 노란색으로 나오겠지만,

가상클래스가 있는 곳에 !important 를 붙여줌으로써 가장 최우선순위로 CSS를 입혀 파란색으로 나옵니다.

      

      

      

    
    

      <css />
    
#first {
  color :  #FFD700; /*노란색*/
}

h1:first-child {
    color :  #0000FF !important; /*파란색*/
}

h1:last-child {
    color :  #FFD700; /*노란색*/
}

h1:nth-child(2n) {
    color: #FACBBA; /*살구색*/
}

h1:nth-child(2n-1) {
    color: #8A2BE2; /*보라색*/
}

 

3. [결과]