Cascading이란?
cascade는 계단이 있는 폭포를 의미한다. CSS에서는 규칙을 순서에 따라 계단식으로 합치는 것을 cascade라고 한다. 여러개의 규칙이 적용될 때, 순서에 따라 합쳐진다.
Cascade 순서
cascade를 할 때에는 가장 핵심적인 아래 세가지 요소를 가지고 순서를 정한다.
- 스타일 시트의 종류
- 코드 상의 순서
- 선택자의 명시도
자세한 것은 아래에서 알아보자.
스타일 시트의 종류
브라우저의 기본 스타일 시트 user agent stylesheet 보다 우리가 만들 style.css의 우선순위가 더 높다. 즉, 브라우저의 기본 스타일은 우리의 css 파일이 얼마든지 덮어쓸 수 있다는 것이다.
+) HTML 코드에 인라인으로 스타일을 넣는 것이 가장 우선순위가 높다.
<div style="color:white"> 혹은 개발자 도구의 element.style 부분에 스타일을 넣어줄 경우 가장 높은 우선순위로 적용된다.
코드 상의 순서
똑같은 선택자를 쓰는 경우 나중에 쓸수록 우선순위가 높다.
선택자의 명시도
선택자에 ID가 몇개 있는지, 클래스가 몇개 있는지, 태그가 몇개 있는지 고려하여 점수를 매긴다. 앞에서 부터 점수가 높은 선택자가 점수가 높다. 예를 들어 ID가 2개, 클래스가 0개, 태그가 0개인 선택자가 ID가 0개, 클래스가 3개, 태그가 0개인 선택자보다 우선순위가 높다.
https://specificity.keegan.st/ 이 사이트에서 명시도 점수를 계산해볼 수 있다.
+ !important
규칙 뒤에 !important 를 붙여주게 되면 해당 규칙이 가장 우선순위가 높게 적용된다.
팁
이렇게 규칙에 밑줄이 그어져있을 경우 더 우선순위가 높은 규칙에 의해 해당 규칙이 씹힌(?) 것이라고 보면 된다.
