CSS 적용 우선순위 - 기타 중요한 사항 총정리

✨ !important는 항상 앞선다 ✨

<style>
    p {
        color: blue !important;
    }
</style>
<p style="color: red;">This text is blue because of !important.</p>

 

원래는 인라인이 내부 스타일시트보다 앞서지만 "!important"가 있기 때문에 해당 글씨는 파란색으로 적용된다.

근데 우선순위를 교란(?)하기 때문에 많이 안 쓰는 것이 좋다.

 

 

 

 

✨ Specificity가 높을수록 앞선다 ✨

Specificity가 뭐냐? 여러 규칙들이 충돌할 때 우선순위를 정하기 위해 매긴 '우선 점수'라고 할 수 있다.

아래 규칙을 활용해 점수를 계산하면 된다.

 

 

Inline Styles는 당연히 가장 우선순위가 높으니 1,000점이나 받는다. ID Selectors는 그다음이라고 했으니 100점을 받는다. 계속 반복,,

그냥 앞에서 말한 것을 점수화한 것에 불과하고 별로 어렵지는 않다.

 

 

다만 요런 예시를 보면 "p"는 "::first-line"보다 빠르기 때문에 "::first-line"이 붙었다고 해서 뭐 우선순위가 달라지나,, 싶을 수 있는데 이렇게 점수화해서 생각하면 전자는 10점, 후자는 11점이기 때문에 후자가 더 우선한다는 것을 직관적으로 이해할 수 있다.

 

 

이 예시도 괜찮다.

 

 

 

 

✨ 그래도 다 똑같으면 뒤에 있는 게 앞선다 ✨

<style>
    .example {
        color: red;
    }
    .example {
        color: blue;
    }
</style>
<p class="example">This text will be blue.</p>

 

 

 

 

 

 

---

 

 

 

 

 

 

https://poiemaweb.com/css3-selector

CSS3 Selector | PoiemaWeb

 

Selector 자체에 대한 총정리는 이거 보면 될 듯