3. CSS 선택자 우선순위

CSS에서는 여러 스타일이 동일한 요소에 적용될 때, 어떤 스타일이 우선적으로 적용될지를 결정하는 규칙이 존재합니다.
이 규칙을 선택자 우선순위라고 합니다. 우선순위를 이해하면 원하는 스타일을 정확하게 적용할 수 있으며, 불필요한 오류를 줄일 수 있습니다.

기본 우선순위 규칙

CSS의 기본적인 적용 순서는 위에서 아래로입니다.
즉, 아래에 위치한 스타일이 위의 스타일을 덮어쓰게 됩니다. 하지만 동일한 요소에 여러 선택자가 적용될 경우, 선택자의 우선순위에 따라 스타일이 적용됩니다.

선택자 우선순위

CSS에서 선택자의 우선순위는 다음과 같은 순서로 결정됩니다:

1. 태그 선택자 (예: h1, p)
2. 클래스 선택자 (예: .class1)
3. 아이디 선택자 (예: #id1)
4. 인라인 스타일 (예: <h1 style="color: red;">)
5. !important 규칙

위의 순서에 따라, 동일한 요소에 여러 스타일이 적용될 경우, 가장 높은 우선순위를 가진 스타일이 적용됩니다.

예제 코드와 설명

다음은 선택자 우선순위를 보여주는 예제입니다:

h1 {
    background: pink;
}

h1 {
    background: red;                 
    /* 동일한 요소에 중복된 선택자. 후자의 스타일이 적용됩니다. */
}

#id1 {
    background: blue;
    /* 아이디 선택자는 클래스 선택자보다 우선순위가 높습니다. */
}

.class1 {
    background: yellow;
    /* 클래스 선택자는 태그 선택자보다 우선순위가 높습니다. */
}

div {
    background: aqua!important;
    color: black;
    /* !important 규칙이 적용된 스타일은 최우선으로 적용됩니다. */
}

• 첫 번째 h1 선택자는 background: pink;를 지정합니다. 그러나 두 번째 h1 선택자가 바로 뒤에 위치해 있으므로, background: red;가 최종적으로 적용됩니다.

• #id1 선택자는 background: blue;를 지정합니다. 이 아이디 선택자는 클래스 선택자보다 우선순위가 높아, 클래스에서 지정한 스타일을 덮어씁니다.

• .class1 선택자는 background: yellow;를 지정합니다. 클래스 선택자는 태그 선택자보다 우선순위가 높습니다.

• div 선택자에 background: aqua!important;를 사용했습니다. !important는 모든 다른 우선순위 규칙보다 우선적으로 적용되므로, background: aqua;가 최종적으로 적용됩니다.

실습 예제

다음 HTML 코드에서는 선택자 우선순위에 따라 스타일이 적용되는 것을 확인할 수 있습니다:

<h1>선택자 우선순위</h1>
<p>
    기본적으로 CSS는 위에서부터 아래로 적용됩니다.<br>
    동일한 요소에 다양한 선택자로 CSS를 부여한 경우 우선순위는 다음과 같습니다:<br>
    태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인 스타일 방식 → `!important`
</p>

<div id="id1" class="class1">우선순위 테스트</div>

• 이 코드에서는 <div> 요소에 id="id1"과 class="class1"이 적용되었습니다. 기본적으로 #id1의 스타일이 .class1의 스타일보다 우선합니다.

• 그러나, div 선택자에 !important를 사용했기 때문에, 해당 스타일이 최종적으로 적용됩니다.