CSS를 작업하다 보면 분명 스타일을 작성했는데 원하는 대로 적용되지 않는 경우가 자주 있습니다.
특히 실무에서는 여러 파일, 여러 선택자, 컴포넌트 구조가 겹치면서 CSS 우선순위(Specificity) 때문에 예상과 다른 결과가 나오는 일이 많습니다.
이 문제를 해결하려면 반드시 알아야 하는 개념이 바로 CSS 우선순위 적용 순서입니다.
어떤 선택자가 더 강한지, 왜 나중에 작성한 코드가 덮어쓰는지 이해하면 CSS 충돌을 훨씬 쉽게 해결할 수 있습니다.
이번 글에서는 CSS 우선순위 적용 순서, 선택자별 강도 차이, 그리고 실무에서 충돌을 피하는 방법까지 예제와 함께 쉽게 정리해보겠습니다.
CSS 우선순위란?
CSS 우선순위는 여러 스타일이 같은 요소에 동시에 적용될 때 어떤 스타일이 최종적으로 적용될지 결정하는 규칙입니다.
예를 들어 같은 요소에 두 개의 색상 스타일이 있으면 브라우저는 우선순위를 계산하여 하나만 적용합니다.
p {
color: blue;
}
.text {
color: red;
}
같은 p 요소에 class="text"가 있다면 빨간색이 적용됩니다.
CSS 우선순위 적용 순서
CSS는 기본적으로 아래 순서로 우선순위를 판단합니다.
- 1. !important
- 2. 인라인 스타일(style 속성)
- 3. id 선택자
- 4. class / 속성 / 가상 클래스
- 5. 태그 / 가상 요소
- 6. 전체 선택자(*)
위에 있을수록 더 강한 우선순위를 가집니다.
1. !important가 가장 강력하다
!important는 가장 높은 우선순위를 가집니다.
.text {
color: blue !important;
}
다른 대부분의 스타일을 덮어씁니다.
하지만 남용하면 유지보수가 어려워지므로 꼭 필요한 경우에만 사용해야 합니다.
2. 인라인 스타일
HTML 요소에 직접 작성한 style 속성은 매우 강합니다.
<p style="color:red;">텍스트</p>
일반 class 스타일보다 우선 적용됩니다.
3. id 선택자
#title {
color: green;
}
id는 class보다 강한 우선순위를 가집니다.
4. class / 속성 / 가상 클래스
실무에서 가장 많이 사용하는 우선순위입니다.
.button {
color: black;
}
input[type="text"] {
border: 1px solid #ddd;
}
a:hover {
color: red;
}
5. 태그 선택자
가장 기본적인 선택자이며 우선순위는 낮은 편입니다.
p {
color: gray;
}
우선순위 숫자로 이해하기
보통 아래처럼 숫자로 이해하면 쉽습니다.
- 인라인 = 1000
- id = 100
- class = 10
- 태그 = 1
예를 들어 아래 코드를 보겠습니다.
#box .title p
계산하면 100 + 10 + 1 = 111 입니다.
같은 우선순위면 나중 코드가 적용된다
우선순위가 같다면 나중에 작성된 CSS가 적용됩니다.
.text {
color: blue;
}
.text {
color: red;
}
최종적으로 빨간색이 적용됩니다.
실무에서 가장 많이 겪는 충돌 예시
.card p {
color: gray;
}
.notice p {
color: red;
}
같은 p에 두 class가 동시에 있으면 더 구체적인 선택자가 적용됩니다.
우선순위 충돌 해결 방법
1. 선택자 깊이 줄이기
너무 깊은 선택자는 충돌을 만들기 쉽습니다.
2. class 기반 구조 사용
id보다 class 중심으로 구조를 만들면 유지보수가 쉬워집니다.
3. !important 최소화
정말 긴급한 override 상황이 아니라면 피하는 것이 좋습니다.
실무 추천 우선순위 관리법
실무에서는 보통 아래 기준으로 작성합니다.
- reset CSS
- 공통 스타일
- 컴포넌트 스타일
- 페이지별 스타일
- 상태 스타일(active, hover)
이 순서를 지키면 충돌을 크게 줄일 수 있습니다.
CSS 우선순위와 SEO
우선순위는 SEO에 직접 영향은 없지만, 코드 구조와 유지보수성에 큰 영향을 줍니다.
깔끔한 CSS 구조는 웹 성능과 사용자 경험 개선에도 도움이 됩니다.
마무리
CSS 우선순위는 스타일 충돌을 해결하는 핵심 개념입니다.
정리하면 다음과 같습니다.
- !important > 인라인 > id > class > 태그 순서
- 같은 우선순위면 나중 코드가 적용
- 실무에서는 class 기반 구조가 가장 안정적
스타일이 안 먹히는 대부분의 문제는 우선순위를 이해하면 쉽게 해결됩니다. CSS 실력을 빠르게 늘리고 싶다면 반드시 익혀야 하는 핵심 개념입니다.