CSS의 Cascading

Cascading

CSS는 Cascading Style Sheets의 약자입니다.
Cascading은 폭포, 위에서 아래로 쏟아지는이라는 뜻을 가진 단어입니다.
그리고 Cascading은 CSS에서 어떤 스타일을 우선적으로 적용 받을지에 대한 규칙이기도 합니다.

Cascading은 아래와 같이 세가지의 규칙이 있습니다.

• 중요도
• 명시도
• 선언순서

중요도

CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라집니다.

명시도

대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아지는데 아래와 같습니다.

1. 속성 값 뒤에 !important를 붙인 속성
2. HTML에서 style을 직접 지정한 속성
3. #id로 지정한 속성
4. .class, :pseudo-class로 지정한 속성
5. 태그이름으로 지정한 속성
6. 상위 객체에 의해 상속된 속성

선언순서

선언된 순서에 따라 우선 순위가 적용됩니다.
코드에서 가장 나중에 선언한 속성을 최우선으로 적용한다는 것 입니다.

---

이외에 Specificity Calculator 개념이 있습니다.
Specificity Calculator는 일종의 점수를 매겨 높은 점수일수록 우선순위가 되는 것입니다.

Specificity Calculator 사이트를 눌러보면 점수를 계산할 수 있는 사이트가 나옵니다.