같은 요소에 같은 속성을 여러 번 지정했을 때 어떤 값이 적용되는지 정하는 과정이 캐스케이드다. [[선택자]]로 대상을 골랐다고 해서 그 규칙이 항상 우선하는 것은 아니다.
- 먼저 조건에 맞고 유효한 선언인지 본다. 이어 선언의 출처와 중요도, 레이어 등의 우선순위가 관여한다.
- 그 단계들이 같을 때 명시도를 비교한다. 같은 레이어의 일반 선언에서는 `.note`가 `p`보다 명시도가 높다.
- 명시도까지 같아도 `@scope`를 썼다면 범위의 가까움을 비교한다. 앞선 조건까지 같을 때 뒤에 선언한 값이 이긴다.
- 개발자 도구에서 요소를 선택하고 취소선이 그어진 선언과 최종 계산값을 본다. `!important`를 계속 붙이기 전에 어떤 조건에서 밀렸는지 확인한다.
## 작은 예제
아래 코드를 UTF-8 형식의 `example-05.html`로 저장해 웹 브라우저에서 연다.
```html
CSS 규칙이 겹칠 때
CSS 규칙이 겹칠 때
세 규칙이 이 문장의 색을 정하려고 한다.
```
문장은 마지막 `.note`의 초록색으로 보인다. 마지막 선언을 지우면 뒤에 있는 `p`의 붉은색이 아니라 첫 `.note`의 파란색이 남는다. 이 예제는 모두 같은 출처·중요도이며 레이어와 범위를 지정하지 않은 경우다. [[CSS]]가 커지면 [[캐스케이드 레이어]]로 규칙 묶음의 관계를 정할 수도 있다.
## 참고
- [MDN: 캐스케이드의 비교 순서](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction)
- [Interneting Is Hard: 선택자](https://internetingishard.netlify.app/html-and-css/css-selectors/)
#CSS #웹제작