[CSS] ⭐ CSS Selectors(4) | Cascade (캐스케이드) | Specificity (특이도)

Cascade (캐스케이드)

적용된 스타일의 순서가 중요하다. 스타일의 최상단부터 출발한 폭표(cascade)가 아래로 쭉 흘러서 스타일시트 최하단이나 다음 스타일 시트로 넘어가는 것이다.  순서는 중요하며 맞닥뜨린 순서가 브라우저의 표시에 반영된다.

h1 {
	color: red;
    }
h1 {
	color: purple;
    }

위의 코드는 2갸의 상반되는 <h1> 스타일이 있다. 하나는 빨강, 하나는 보라이다. 우선은 빨강이 먼저 적용된다. 하지만 캐스케이드로 인해 보라색으로 대체된다. 

순서는 하나 이상의 스타일시트가 있을 경우에도 중요하다. 순서의 영향은 브라우저의 페이지를 따라 내려가며 모든 스타일을 순서대로 만나고 다음 링크된 이 스타일시트로 넘어간다잉.

---

서로 충돌하는 스타일이 동일한 요소에 적용된다면 어떻게 될까?

순서가 중요하다

 

Specificity (특이도)

특이도는 충돌이 생길 경우 브라우저에서 규칙을 적용하는 방법이다. 

.post button:hover {
   color: white; 
   background-color: #cc5612;
}

기존의 hover 값을 입력했다.

그리고 추가로 hover값을 새로 입력했다.

button:hover {
    background-color: #cc5612;
    font-size: 60px;
}

그러자 충돌이 생긴다. 

Log In과 Vote에 마우스를 대면 background-color과 font-size의 색과 크기가 변한다. 그러나 Sign Up에 마우스를 대자

충돌이 생겼다. 그 원인은 무엇을까? specificity 즉 특이도 때문이다. 

➡️ 하나 이상의 스타일이 동일한 요소에 적용되거나 적용될 수 있는 경우에는 충돌이 발생한다.

 

①
.post button:hover {
    color: white; 
    background-color: #cc5612;
 }

②
button:hover {
    background-color: #cc5612;
    font-size: 60px;
}

1번 코드와 2번 코드의 충돌이 있었다. 1번 코드의 post 클래스 안에 버튼에 마우스를 대면 다홍색으로 변경하라는 선택자와 머스타드컬러로 바꾸라는 선택자가 두 스타일 모두 같은 요소에 적용될 수 있다.    

만일 1번 코드 스타일을 삭제한다면 머스타드 컬러로 변한다. 

1번과 2번 코드가 동시에 있는 상황에서는 브라우저가 계산을 한다. 주어진 선택자가 얼마나 구체적인지 측정한 뒤 더 구체적인 선택자를 우선적으로 적용한다는 것이다! 즉 경쟁 선택자보다 우선시하는 거다. 

위의 코드 블럭에서는 1번 선택자가 2번 선택자 보다 더 구체적이라고 측정하는 거다. 

 

Id > Class > Element

구체적인 것은 Id로 어떤 클래스 선택자보다 우선적이다. Class 선택자도 상당히 구체적인 편이다. 어떤 요소 선택자를 대상으로도 항상 우위를 점한다. 

 

위의 코드 블럭에서 1번 코드를 보면 button과 hover 사이에 post가 중첩되어 있다.