CSS - 캐스케이딩

캐스케이딩

: CSS의 우선순위를 결정하는 세 가지 요소.

 

1. 순서

동일하게 태그를 선택한 상황에서, 같은 속성을 사용하는데 속성값만 다름. 이 경우에는, 나중에 작성한 속성값의 우선순위가 높기 때문에 이 때 컬러는 blue로 표기가 됨.

<p>Hello World</p>

// style.css 문서
p { color: red; }
p { color: blue; }

 

2. 디테일

같은 <p>태그라도, 하나는 부모를 명시해줬고, 다른 하나는 그냥 <p>태그라면, header 안의 p가 좀 더 구체적으로 작성된 CSS 선택자이기 때문에 색상은 red로 나타나게 됨.

<header>
  <p>Hello World</p>
</header>

// style.css 문서
header p { color: red; }
p { color: blue; }

 

3. 선택자

사용하는 선택자에 따라서도 CSS의 스타일이 달라질 수 있음. 추가적으로, 스타일 속성을 사용했는지에 따라 우선순위가 달라지게 됨. style > id > class > type 순으로 우선순위가 높음.

<h3 style="color: pink" id="color" class="color"> color </h3>

// style.css 문서
#color { color: blue; }
.color { color: red; }
h3 { color: green; }

나중에, 다른 사람이 만든 CSS 코드를 수정할 때, 기존 코드를 직접적으로 수정하는 것보다, 우선순위를 활용해서 수정을 하는 게 원본코드를 유지할 수 있는 방법이라 유용. 원본코드를 유지하면서 기존 디자인을 새로운 디자인으로 덮어 씌워버리겠다 할 때는 캐스케이딩 우선순위를 활용하면 됨.