[코드잇 풀스택 1기] CSS cascading 이해

Cascading ?

Cascade(종속) 이라는 뜻으로 위에서 아래처럼 계단형(폭포)의 느낌으로

규칙을 순서에 따라 계단식으로 합치는 것을 의미!

 

어떤 스타일에 따라 CSS 적용 순서가 정해집니다.

위 그림처럼 상위 요소에서 하위 요소로 계속 이어지는 방식을 의미합니다.

우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다.

 

참고 자료

명시도 계산 사이트

https://specificity.keegan.st/

Specificity Calculator

 

 

Cascading order

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#cascading_order

Introducing the CSS Cascade - CSS: Cascading Style Sheets | MDN

 

 

1. 특수성 : 원점과 동일한 경우 규칙의 특이성을 고려하여 하나의 값 또는 다른 값을 선택합니다.

높은 특수성을 가지면 낮은 특수성을 가진 선택자보다 우선으로 적용됩니다.

 

특이성 우선순위

# ID 선택자 -> 높은 특정성
.클래스 선택자 ->
<div>, <p> 태그

 

출처 : https://specificity.keegan.st/

위 내용처럼 시각적으로 특이성을 계산하여 보여줍니다.

 

2. 중요도 : !important를 통해서 규칙을 적용하여 다른 규칙보다 우선순위를 가집니다.

 

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#cascading_order

 

p{
  color: red !important;
}


p{
  color: green ;
}

위 코드처럼 !important를 통해서 CSS를 같은 속성을 여러 번 정의했을 때, 나중 설정한 값이 적용된다.

하지만 아래 예시를 보면서 이해하시면 좋을 거 같아요!

 

F12 관리자 도구에서 하나씩 적용해 본 결과

color: red; => red 색상을 받았다.

color: blue !important => blue의 색상을 받았다.

color: green; => 위 blue !important 때문에 green의 색상을 얻어오지 못했다.

color: green !important를 통해서 green의 색상을 적용할 수 있었다.

 

3. 소스 순서

 

p{
  color: red;
}


p{
  color: green ;
}

위 코드와 동일하게 코드 순서에 따라

p 태그의 적용된 색상은 green입니다.