CSS 캐스케이딩

CSS는 스타일 규칙이 "캐스케이드" 방식으로 적용된다. 캐스케이딩은 여러 스타일 규칙이 하나의 요소에 적용될 때, 어떤 규칙이 우선 적용될지를 결정하는 메커니즘이다. 이 메커니즘은 세 가지 주요 원칙을 따른다.
 

1. 스타일 시트의 출처(Origin)

---

스타일 시트는 세 가지 출처에서 올 수 있다

• 사용자 에이전트 스타일 시트(User Agent Style Sheet): 브라우저 기본 스타일 시트
• 사용자 스타일 시트(User Style Sheet): 사용자가 정의한 스타일 시트
• 저자 스타일 시트(Author Style Sheet): 웹 페이지의 작성자가 정의한 스타일 시트

기본적으로, 우선순위는 다음과 같다.

1. 사용자 에이전트 스타일 시트
2. 저자 스타일 시트
3. 사용자 스타일 시트 (사용자가 중요한 선언 !important를 사용한 경우, 저자 스타일 시트보다 우선 적용됨)

 

2. 특이성(Specificity)

---

특이성은 선택자가 얼마나 구체적인지를 나타낸다. 특이성 점수는 다음 규칙에 따라 계산된다.

• 인라인 스타일: 1000 점
• ID 선택자: 100 점
• 클래스, 속성, 가상 클래스 선택자: 10 점
• 요소 및 가상 요소 선택자: 1 점

<!-- HTML -->
<div id="example" class="container">
  <p>Hello World</p>
</div>

/* div 요소의 텍스트 색상은 파란색이 된다. */
#example { color: blue; } /* 특이성: 100 */
.container { color: green; } /* 특이성: 10 */
div { color: red; } /* 특이성: 1 */

 

3. 선언 순서(Source Order)

---

동일한 특이성을 가진 규칙이 충돌하는 경우, 나중에 선언된 규칙이 우선한다. 이를 "소스 순서"라고 한다.
 

/* p 요소의 텍스트 색상은 파란색이 된다. */
p { color: red; }
p { color: blue; }

 

!important 규칙

!important를 사용하면 그 규칙이 모든 다른 규칙보다 우선한다. 그러나 이는 특이성 규칙과 충돌할 수 있으므로, 신중하게 사용해야 한다.

/* p 요소의 텍스트 색상은 빨간색이 된다. */
p { color: red !important; }
p { color: blue; }