Cascading 이란?
CSS 규칙이 여러 개이고, 하나의 요소에 적용될 때 어떤 규칙이 우선 적용되는지 결정하는 방식, 프로세스.
우선수위가 높은 규칙일수록 우선적으로 적용한다.
우선순위 규칙
- source order (작성 순서)
- specificity (명시도)
- importance (중요도)
+ 스타일의 출처 (origin)
- user agent style : 브라우저 자체가 정의한 기본적인 스타일
- author style : 페이지의 저자(개발자)가 정의한 스타일 (우리가 작성하는 css)
- user style : 사용자가 정의한 스타일 (페이지에서 사용자가 정하는 스타일, ex: 잘 안보여서 글꼴 설정 , 다크모드)
origin의 우선순위 : 사용자 정의 스타일 > 개발자 스타일 > 브라우저 기본 스타일
source order (작성 순서)
p {
color: blue;
}
p {
color: red;
}
동일한 우선순위 규칙이라면 나중에 작성된 것이 우선적용된다. 여기서는 red로 적용된다.
specifity (명시도)
규칙에 따라 점수를 계산하여 우선순위를 결정한다. 점수 규칙과 예시 코드 살펴보자
규칙
- 인라인 스타일 : 1000점
<p style="color:red">
- ID 선택자 : 100점
#id
- 클래스, 속성, 가상클래스 : 10점
.class, [type="text"], :hover
- 요소, 가상요소 : 1점
div, h1, ::before
아래 p태그는 명시도 규칙에의해 red가 적용되는 예시 코드이다.
<p id="title" class="text"></p>
p { color: blue; } /* 1점 */
.text { color: green; } /* 10점 */
#title { color: red; } /* 100점 → 적용됨 */
importance (중요도)
직접 중요도를 붙이는 방법으로 가장 강력하게 적용된다.
p {
color: blue !important;
}
p {
color: red; /* 무시됨 */
}
'CSS, Tailwind' 카테고리의 다른 글
z-index 가 안 먹힌다? 쌓임 맥락 (stacking context) (0) | 2025.06.16 |
---|---|
white-space 로 줄바꿈 강제로 막기 (0) | 2024.07.03 |
pointerEvents : none 으로 클릭이벤트 막기 (0) | 2024.07.02 |
pageX 와 clientX 의 차이 CSS (1) | 2024.07.02 |