노션에 기록했다가 벨로그로 뒤늦게 옮기기..
Cascading
Cascading 는 단어 자체로는 ‘폭포', ‘위에서 아래로 쏟아지는’ 이란 뜻을 가진 단어이다.
CSS는 ‘Cascading Style Sheets’의 약자인데 여기서 엿볼수 있듯이 Cascading은 CSS의 매우 핵심적인 요소이다.
Cascading이 중요한 이유?
Origin types
user-agent stylesheets
author stylesheets
user stylesheets
user-agent < user < author 순으로 우선순위가 높다.
1. Origin and Importance우선순위가 결정되는 요소 3가지
2. 명시도 Specificity
3. 소스 순서 Order of Appearance
1. Origin and Importance
| 낮음에서 높음 | 스타일시트 | 중요성 |
|---|---|---|
| 1 | user-agent(browser) | normal |
| 2 | user | normal |
| 3 | author(developer) | normal |
| 4 | author (developer) | !Important |
| 5 | user | !Important |
| 6 | user-agent( browser) | !Important |
안 배운 내용은 차치해두고 앞서 말했다듯이 일반적인 우선순위는 개발자, 사용자, 브라우저 스타일시트 순이다.
하지만 Important가 붙었을 경우에는 그 순서가 반대로 된다.
그렇기 때문에 important를 남용하지 않아야 하고,
선언했을 경우 나중에 재정의 되지 않도록 꼭 필요한 경우에만 사용해야 한다!!
명시도 Specificity
가장 관련성이 높은 요소를 결정하기 위해 사용하는 알고리즘으로, 선택자들의 가중치를 계산해 어떤 스타일 규칙이 결과적으로 해당 요소에 적용될지 결정한다.
명시도가 가장 높은 스타일은 인라인 스타일이다.
- 인라인 스타일을 바꾸기 위한 유일한 방법은 해당 규칙에
!important를 적용하는 것이다.
가중치는 3가지 유형의 선택자를 기준으로 가중치를 추가한다. (ID-Class-Type)
1. ID 선택자: #myId 와 같은 id 선택자에 대해 가중치를 추가한다. (1-0-0)
2. Class 선택자: .myClass 와 같은 클래스 선택자, [type="radio"] 와 같은 속성 선택자, :hover , :nth-of-type() 와 같은 가상클래스 선택자에 대해 가중치를 추가한다. (0-1-0)
3. Type 선택자: p, h1와 같은 요소 선택자나 ::before, ::placeholder 와 같은 가상클래스 혹은 더블-콜론 선택자들에 대해 가중치를 추가한다. (0-0-1)
왼쪽부터 오른쪽으로 값을 비교해서 오른쪽 열의 값에 관계없이 해당 열의 값이 더 큰 선택자를 선택한다. _ex) 다음 코드의 경우 총합 가중치가 2번이 높더라도 ID 열의 값이 더 높기 때문에 1번의 우선순위가 더 높게 적용된다._
#myId {} /* 1번 가중치 1-0-0 */
.myClass .have. otherClass {} /* 2번 가중치 0-3-0 */:is(), :not(), :has() 해당 가상 클래스들은 가중치 계산에 포함되지 않는다.
p {
/* 0-0-1 */
}
:is(p) {
/* 0-0-1 */
}
h2:nth-last-of-type(n + 2) {
/* 0-1-1 */
}
h2:has(~ h2) {
/* 0-0-2 */
}
div.outer p {
/* 0-1-2 */
}
div:not(.inner) p {
/* 0-1-2 */
}
:where() 의 가중치는 항상 (0-0-0) 이다.
가중치를 높이지 않고 선택자를 대상으로 하는 요소를 구체적으로 만들 수 있다.
:where(#defaultTheme) a {
/* 가중치 0-0-1 */
color: red;
}또는 명시도를 높이기 위해 선택자를 중복으로 사용할 수 있다.
#myId#myId#myId span {
/* 3-0-1 */
}
.myClass.myClass.myClass span {
/* 0-3-1 */
}소스 순서 Order of Appearance
동일한 요소에 대한 여러 스타일이 있을 경우 나중에 쓰여진 소스가 우선순위가 높다.
span {
background-color: red;
}
span {
background-color: blue;
}이럴 경우 밑에 쓰여진 스타일이 적용되어 span 요소의 배경색은 모두 파란색이 적용된다.
추천 사이트
- https://estelle.github.io/CSS/selectors/exercises/specificity.html
→ 가중치 계산하는 연습 - https://specificity.keegan.st/
→ specificity calculator
출처 mdn
https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
