*매우중요 css - CASCADE(순차적용), SPECIFICITY(상세적용)

css에 매우 중요한 개념을 알게되었다.

CASCADE라는 개념이다.

 

쉽게말해서 css를 html에 적용시키려면 필연적으로

<link rel="stylesheet" href="">

의 형태로 연결시키게 된다.

 

만약에 main.html에 연결된 css가 3개가 있을때

main.html의 head부분에는 3개의 link가 있을것이다.

이것을

link A

link B

link C

라고 해보자.

 

그러면 우선 link A를 쭉 훑는다.

만약에 link A에 해당하는 css안에 h1 태그에 노란색으로 적용하라는 css가 있으면 노란색으로 적용이 된다.

link B를 다음으로 훑을때 h1 태그에 빨간색을 적용하라면 빨간색이 적용된다.

다음으로 link C를 훑을때 h1 태그에 초록색을 적용하라고 했다가 마지막에 가서 h1 태그에 분홍색을 먹여달라고 명령이

되어있다면 최종적으로는 h1태그에는 분홍색이 먹여지게 된다.

즉, 동일한 태그를 사용했을때 가장 나중에 있는게 적용이 되는 것이고, 가장 먼저 있었을수록 덮어씌우기를 당하는 개념이라고 보면 되겠다.

---

하지만 위의 원리보다 우선하는 개념이 있다.

SPECIFICITY이다.

같은 태그에 같은 기능을 넣더라도 더욱 상세하게 표현을 했다면

먼저 나왔던 태그일지라도 그것에 우선권을 부여해주는 것이다.

이를테면

.post button:hover {

background-color: #e63946;

color: #f1faee;

}

button:hover {

background-color: olive;

font-size: 10px;

}

 

이렇게 두개의 경우로 버튼에 hover를 주는 케이스에 있어서 post클래스가 적용되는건

더욱 상세하게 표현이 되었기 때문에, 나중에 나온것과 관계없이 우선적으로 적용되게 된다.

---

SPECIFICITY의 우선적용되는 순서는 다음과 같다

 

ID > CLASS > ELEMENT

 

ID당 100점

CLASS당 10점

ELEMENT당 1점

이라고 보면된다.

 

이에대한 우선적용 점수에 대한 계산 사이트는 다음과 같다

https://specificity.keegan.st/

Specificity Calculator