같은 요소에 같은 속성을 여러 번 지정했을 때 어떤 값이 적용되는지 정하는 과정이 캐스케이드다. 선택자로 대상을 골랐다고 해서 그 규칙이 항상 우선하는 것은 아니다.
- 먼저 조건에 맞고 유효한 선언인지 본다. 이어 선언의 출처와 중요도, 레이어 등의 우선순위가 관여한다.
- 그 단계들이 같을 때 명시도를 비교한다. 같은 레이어의 일반 선언에서는
.note가p보다 명시도가 높다. - 명시도까지 같아도
@scope를 썼다면 범위의 가까움을 비교한다. 앞선 조건까지 같을 때 뒤에 선언한 값이 이긴다. - 개발자 도구에서 요소를 선택하고 취소선이 그어진 선언과 최종 계산값을 본다.
!important를 계속 붙이기 전에 어떤 조건에서 밀렸는지 확인한다.
작은 예제
아래 코드를 UTF-8 형식의 example-05.html로 저장해 웹 브라우저에서 연다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS 규칙이 겹칠 때</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; font-family: sans-serif;
line-height: 1.6; color: #222; background: #fff; }
main { max-inline-size: 60rem; margin-inline: auto; }
h1 { font-size: 1.7rem; line-height: 1.3; }
a { color: #174fa0; }
:focus-visible { outline: 3px solid #174fa0; outline-offset: 3px; }
.note { color: #164fa0; }
p { color: #a02b16; }
.note { color: #20613e; }
</style>
</head>
<body>
<main>
<h1>CSS 규칙이 겹칠 때</h1>
<p class="note">세 규칙이 이 문장의 색을 정하려고 한다.</p>
</main>
</body>
</html>문장은 마지막 .note의 초록색으로 보인다. 마지막 선언을 지우면 뒤에 있는 p의 붉은색이 아니라 첫 .note의 파란색이 남는다. 이 예제는 모두 같은 출처·중요도이며 레이어와 범위를 지정하지 않은 경우다. CSS가 커지면 캐스케이드 레이어로 규칙 묶음의 관계를 정할 수도 있다.