CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기

`!important` 선언

CSS 스타일을 지정할 때 가끔 어떤 속성(Property)은 아주 중요해서 다른 속성보다 우선시해야 할 때가 있습니다.
이럴 경우 !important를 사용하면 일반적인 property: value;보다 해당 선언이 중요하다는 것을 표시합니다.

CSS에서는 이것을 important 선언이라고 부르고 선택자의 속성과 값을 선언의 끝에 나타내는 세미꼴론(;) 앞에 !important를 추가해서 property: value !mportant;처럼 표현합니다.

이렇게 속성의 값에 !important가 선언되면 CSS 스타일 우선순위 규칙을 변경하여 일반적으로 선언한 속성의 값 보다 우선권이 부여되어 우선적으로 선택됩니다.

사전에 필요로 하는 지식

CSS에서 일반적으로 선언된 스타일 우선순위 규칙을 이해하고 있으면 !important 선언이 CSS 스타일 우선순위 규칙을 변경하여 일반적으로 선언한 속성의 값 보다 우선권이 부여되어 우선적으로 선택된다는 것에 대해 좀 더 쉽게 이해할 수 있습니다.

CSS 스타일 우선순위를 정확히 이해하기

스타일 적용 우선 순위의 우선권 부여하기

데모: !important 선언

<style>
    #myid {
        background-color: red;
    }
    .important-background {
        background-color: yellowgreen !important; /* !important 선언 */
    }
</style>
<p id="myid" class="important-background">
    CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>

위의 데모 예시를 통해 확인할 수 있듯이 #myid 선택자의 스타일 우선순위가 .important-background보다 높지만 background-color 속성의 값은 yellowgreen로 처리됩니다.

!important가 선언되면 CSS 스타일 우선순위 규칙을 변경하여 일반적으로 선언한 속성의 값 보다 우선권이 부여되기 때문입니다.

참고 사항

!important 선언을 사용할 때 참고할 만한 사항입니다.

`!important`의 `!` 다음의 `important` 띄어쓰기 - `! important`

!important의 ! 다음의 important 띄어쓰기, 즉 공백의 추가는 허용됩니다. ! important처럼 띄어쓰기는 허용되지만 일반적으로는 띄어쓰기를 하지 않습니다.

`!important`를 선언했을 경우에는 그 이유를 주석으로 설명

!important를 선언했을 경우에는 그 이유를 주석으로 설명하는 것이 좋습니다. 주석으로 설명한다면, CSS 코드를 향 후에 이해하는데 도움이 됩니다.

주의할 점

!important를 선언할 경우 몇 가지 주의해야 할 점이 있습니다.

`!important` 선언을 동일한 속성에 여러 번 지정했을 경우

HTML

<style>
    #myid {  /* 구체성 값 = 0,1,0,0 */
        background-color: red !important;
    }
    .important-background {  /* 구체성 값 = 0,1,0,0 */
        background-color: yellowgreen !important;
    }
</style>
<p id="myid" class="important-background">
    CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>

위 데모 예시처럼 동일한 요소의 동일한 속성에 여러 번 !important 선언을 했을 경우에는 동일한 우선권이 부여되기 때문에 CSS 스타일 우선순위 규칙이 적용됩니다. 즉, 구체성의 값이 높은 선택자의 속성 값이 적용됩니다.

CSS 선택자의 구체성 값

일반선언과 !important로 표시된 선언들은 특별한 구체성을 갖지 않지만, 이 표시가 없은 선언들과는 별개로 다루어집니다. 실제로 !important 선언은 !important 선언들끼리, 이 표시가 없는 일반 선언은 일반 선언들기리 구체성이 경정됩니다. 따라서, !important 선언과 일반적인 선언이 충돌할 때에는 !important 선언이 우선권을 갖습니다.

`@keyframes` 블록 내에서 사용 금지

@keyframes 블록 내에서 !important 선언은 유효하지 않습니다. 다음의 예시 코드로 살펴보겠습니다.

HTML

<style>
    .important-background {
        animation: bg-animation 3s infinite both;
    }
    @keyframes bg-animation {
        0% {
            background-color: red !important;
        }
        100% {
            background-color: blue;
        }
    }
</style>
<p class="important-background">
    CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>

위 예시 코드를 보면 @keyframes 블록 내에서 background-color: red !important;를 사용했습니다. 이럴 경우 !important 선언은 유효하지 않기 때문에 background-color: red가 아예 적용되지 않습니다. 이는 background-color의 값이 red important처럼 작동하여 유효하지 않는 값으로 처리되기 때문입니다.

따라서 위 예시 코드의 경우 100%에서의 background-color: blue;만 적용됩니다.

단축 표현 속성을 사용했을 경우

다음의 코드 예시를 통해 살펴보겠습니다.

HTML

<style>
    .important-background {
        border: 2px solid red !important;
    }
    .important-background:hover {
        border-color: blue; /* 작동하지 않음 */
    }

</style>
<p class="important-background">
    CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>

위 코드 예시를 보면 border: 2px solid red !important;는 다음의 하위 속성들을 모두 !important로 선언한 것과 동일합니다.

border-width: 2px !important;
border-style: solid !important;
border-color: red !important;

따라서, 마우스를 올려 hover했을 경우 지정한 border-color: blue;는 작동하지 않습니다. 이는 마치 다음의 코드와도 같은 것입니다.

HTML

<style>
    .important-background {
        /* border: 2px solid red !important; */
        border-width: 2px !important;
        border-style: solid !important;
        border-color: red !important;
    }
    .important-background:hover {
        border-color: blue; /* 작동하지 않음 */
    }

</style>
<p class="important-background">
    CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>

`!important` 선언은 언제 하는 것이 좋을까요?

인라인 스타일을 재정의할 때 유용합니다.
특히, JavaScript로 CSS를 style 속성으로 정의 할 때는 인라인 스타일로 적용되는데, 이럴 경우 JavaScript로도 스타일을 정의하지 못하게 할 때 유용합니다.
구체성이 높은 규칙을 무시하고 재정의하고 싶을 때 유용합니다.