CSS cascade
specificity
inheritance
property/value 쌍으로 이루어진 CSS declarations
CSS 선언은 origin에 따라 다음과 같이 분류된다.
Cascade 알고리즘은 CSS 선언에 따라 document element의 CSS property에 value를 할당해 요소를 스타일링하는데
CSS 선언은 scope 내에서 서로 다른 origin에 의해 중복이 발생할 수 있다.
CSS cascade 알고리즘은 이러한 중복 선언을 CSS origin에 우선 순위를 두어 해결한다.
media에 따라 element와 일치하는 selector를 필터링한다.
element와 일치하는 selectors를 importance에 따라 정렬한다.
origin의 importance가 동일할 경우 동일 element에 적용되는 selectors의 우선 순위는 specificity에 의해 결정된다.
specificity는 CSS 선언에 적용되는 가중치로 selector를 구성하는 selector type들이 갖는 weight에 대한 합이다.
ones
tens
hundreds
thousands
weight를 갖지 않는 selectors
important rule은 다른 css 선언들을 덮어씌운다.
만약 동일 element에서 !important가 적용된 선언이 중복될 경우 specificity에 따라 결정된다.
#myId#myId {};
.myClass.myClass {};
그렇다면 언제 !important를 사용하는지?
.foo[style*="color: red"] {
color: firebrick !important;
}
#someElement p {
color: blue;
}
p.awesome {
color: red;
}
//이 상황에서는 !important를 사용하지 않고 p.awesome만 건드릴 방법이 없다.
//but, [id="someElement"] p{}로 바꿀 경우 해결 가능
우선순위가 동일할 경우 하위에 작성된 코드가 적용된다.
body h1 {
color: green;
}
html h1 {
color: purple;
}
// color : purple
<body id="parent">
<h1>Here is a title!</h1>
</body>
#parent {
color: green;
}
h1 {
color: purple;
}
// color : purple
CSS properties는 inherit 유무에 따라 다음으로 구분된다.
font {
all : revert;
};
/* font : shorthand property
font-family
font-size
font-stretch
font-style
font-variant
font-weight
line-height
*/
a {
color: inherit;
};