CSS의 Cascading은 무엇인가 (종속, 특이성, 상속)

cascading의 사전적 의미로는 ' 종속, 상속, 폭포' 등이 있다.

CSS는 이 세 가지가 핵심이라 할 수 있다.

 

종속(Cascade)

먼저 CSS는 동일한 규칙의 경우 나중에 적용되는 규칙이 적용된다.

아래를 보면 같은 태그에 대해 같은 속성을 사용한 규칙에서

늦게 정의된 blue color가 적용된다.

<style>
#cascade p { color: red;}
#cascade p { color: blue;}
</style>
<div id="cascade"><p>what color?</p></div>

what color?

 

특이성(Specificity)

특이성은 다른 선택자를 통해 같은 요소를 지목하고 있을 때,

더 특이성이 높은 선택자에서 정의한 속성이 적용되는 것이다.

아래의 코드에서 보면  'p'라는 요소 선택자 보다는 '#red'라는 아이디 선택자가 더 구체적이기 때문에

더 특이성이 높다고 판단하여 먼저 정의되었음에도 불구하고 red color가 적용된다.

<style>
#specificity #red { color: red;}
#specificity p { color: blue;}
</style>
<div id="specificity">
<p id="red">what color?</p>
</div>

what color?

특이성(높은 순)

1. id(#) 선택자
2. 클래스(.) 및 속성 선택자([]), 의사-클래스(:으로 시작하는)
3. 요소 선택자 및 의사 요소(::으로 시작하는)
4. 전체(*) 선택자 및 의사-클래스(:where())

 

상속(Inheritance)

상속은 부모 요소의 속성을 물려 받는 것이다.

모든 속성이 상속을 지원하지는 않는다.

<style>
article {
	color: red;
    font-size: 20px;
    
}
</style>
<article>
this is <span>child</span>
</article>

this is child

상속 속성 값

• inherit - 속성 값을 부모 요소의 속성 값과 동일하게 설정
• initial - 속성 값을 초기 값으로 설정
• revert - 속성 값을 브라우저의 기본 스타일로 설정
• revert-layer - 속성 값을 이전 레이어의 속성 값으로 설정
• unset - 속성이 자연스럽게 상속되면 inherit로, 그렇지 않으면 initial로 작동