HTML에서 어떤 스타일이 최종적으로 적용되는지 헷갈린다면,
이 포스팅 하나로 모두 정리할 수 있다.
1. CSS 우선순위란?
HTML 요소에 여러 CSS 규칙이 동시에 적용될 경우, 브라우저는 특정 규칙을 선택해 적용한다.
이때 어떤 규칙을 우선할지 결정하는 기준이 바로 우선순위(Specificity & Cascade) 이다.
CSS 우선순위는 다음 4가지 요소로 결정된다.
- 중요도(!important)
- 명시도 (Specificity)
- 소스(origin)와 선언 위치
- 선언된 순서 (Order)
각 요소별로 자세히 정리해보자.
2. 우선순위 1순위: !important
동일 속성끼리 충돌할 때, !important는 모든 요소보다 우선한다.
.box {
color: red !important;
}단, !important끼리 충돌하면 명시도 → 선언 순서 기준으로 적용된다.
3. 명시도(Specificity) 계산법
CSS는 선택자마다 점수를 부여한다.
| 선택자 유형 | 예시 | 점수 |
| Inline style | <div style=""> | 1000 |
| ID 선택자 | #title | 100 |
| Class / 속성 / pseudo-class | .box, [type=text], :hover | 10 |
| 태그 선택자 | div, span | 1 |
| 전체 선택자 | * | 0 |
예시:
#header .menu li a:hover- #header → 100
- .menu →10
- li → 1
- a → 1
- :hover → 10
총합 = 122
4. 선언된 위치에 따른 우선순위 (Origin)
CSS는 HTML 내에서 어디서 선언되었는지에 따라 적용 우선순위가 달라진다.
기본 우선순위(위 → 아래 = 약함 →강함)
- 브라우저 기본 스타일 (User-Agent)
- 외부 CSS 파일 ( <link rel="stylesheet"> )
- HTML 내부 <style> 태그
- inline style (style="")
- !important 선언된 규칙
5. HTML 내 위치에 따른 적용 예시
같은 명시도/중요도를 가진 CSS라면 나중에 선언된 스타일이 우선한다.
예제 HTML:
<head>
<link rel="stylesheet" href="style1.css"> <!-- 먼저 로드됨 -->
<link rel="stylesheet" href="style2.css"> <!-- 나중 로드됨 → 우선 -->
</head>
<body>
<link rel="stylesheet" href="late.css">
<!-- body 안에 있어도, head 보다 "나중"이므로 late.css 가 최우선 -->
</body>
정리하면:
style1.css < style2.css < late.css즉, HTML 구조가 어디 있든지 뒤에서 불러온 CSS가 우선한다.
6. <style> 태그도 동일 규칙 적용
<head>
<style>
.box { color: red; }
</style>
</head>
<body>
<style>
.box { color: blue; } /* 이게 적용됨 (나중 선언) */
</style>
</body>
7. 전체 우선순위 요약표
1. !important
2. inline style=""
3. ID 선택자
4. class / pseudo-class / attribute 선택자
5. tag 선택자
6. 전체 선택자 (*)
7. 브라우저 기본 스타일
+ 같은 레벨이면 “나중에 선언된 것” 승리
마무리
CSS 우선순위는 단순히 암기해두는 개념처럼 보이지만, 실제로는 브라우저가 스타일을 결정하는 전체 흐름(Cascade)을 이해하는 것이 핵심이다.
어디서 선언되었는지, 어떤 선택자를 사용했는지, 그리고 어떤 순서로 로드되었는지에 따라 결과가 달라지기 때문에, 이를 정확히 알고 있으면 예상치 못한 스타일 충돌이나 적용 불가 문제를 훨씬 빠르게 해결할 수 있다.
특히 여러 CSS 파일이 혼합된 프로젝트나 레거시 구조에서는 이 우선순위 규칙을 이해하는 것만으로도 유지보수 효율이 크게 향상된다.
앞으로 CSS를 작성하거나 수정할 때,
"중요도 → 명시도 → 선언 위치 → 선언 순서" 라는 기본 원칙을 항상 염두에 두면, 보다 명확하고 예측 가능한 스타일 구조를 유지할 수 있을 것이다.
실무에서 우선순위 충돌을 해결하는 구체적 전략은 다음 포스팅으로 자세히 정리하였다.
'FrontEnd > CSS' 카테고리의 다른 글
| CSS 우선순위 - 실무에서 바로 쓰는 적용 팁 (1) | 2025.11.22 |
|---|---|
| [CSS] 웹 개발에서 피해야 할 10가지 공통 CSS 실수 (0) | 2024.01.18 |
| [CSS] vw와 vh이 무엇인가? %와의 차이점은? (0) | 2022.05.08 |
| [CSS] 상대 단위(em, rem) (0) | 2022.05.08 |
| [CSS] Table tbody에 스크롤 적용하기 (2) | 2022.05.02 |