CSS의 cascading

Q. css의 cascading에 대하여 설명

CSS는 "Cascading Style Sheets"의 약자 cascading이란 폭포처럼 내려오다는 뜻을 가지며 css 규칙들이 겹칠 때 어떤 규칙을 우선하여 적용할지를 결정하는 원리를 의미한다.

css의 여러 스타일 규칙이 같은 요소에 적용될 때. 작성한 순서와 특정 우선순위 규칙에 따라 최종적으로 요소에 적용되는 스타일이 결정된다.

핵심적 기준 3가지

스타일 시트의 종류: user agent style sheet(기본시트)는 유저가 만든 스타일 시트보다는 우선순위가 낮다. html에 직접 스타일을 작성하는 것을 인라인 스타일이라고 한다. 캐스캐이드에서 가장 우선 순위가 높다.

코드상의 순서: 똑같은 선택자를 쓰는 경우에는 나중에 쓸수록 우선순위가 높다.

3. 선택자의 명시도(specificity) 선택자마다 점수가 있고 점수가 높을수록 우선순위가 높다.

specificity calculator 로 명시도 계산 가능

명시도를 계산하는 기준: 선택자에 아이디가 몇 개 있는지, 선택자의 클래스가 몇 개 있는지, 태그가 몇 개 있는지

개발자 도구에서 보면 나오는 위쪽에 있는 css규칙일수록 점수가 높다.

id, class, element 순으로 점수가 높으며 !important는 우선순위를 강제로 높여준다.