[CSS] 캐스캐이드(Cascade)

 

📌 캐스캐이드(Cascade)

: CSS 스타일 규칙이 어떤 우선순위에 따라 요소에 적용되는 방식

• 다양한 CSS 스타일 규칙이 동일한 요소에 적용될 때 발생
  
  

1. 우선순위 (Priority): CSS 스타일 규칙은 다양한 소스에서 나올 수 있다.
   (ex. 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 등)
   Cascading은 이러한 다양한 소스에서 나온 규칙 중에서 어떤 것이 우선순위가 높은 지를 결정한다.
2. 상속 (Inheritance): 부모 요소로부터 자식 요소로 상속한다.
   상속되는 속성은 자식 요소에 직접 지정하지 않아도 부모 요소에서 지정한 값이 자동으로 적용된다.
3. 명확성 (Specificity): 어떤 스타일 규칙이 요소에 적용되는지를 결정한다.
   두 개 이상의 규칙이 동일한 요소를 대상으로 할 때, CSS는 각 규칙의 명확성을 비교하여 가장 명확한 규칙을 적용한다.
4. 코드 순서: 가장 나중에 오는 코드가 적용된다.

 

 

 

📌 CSS 선택자 우선순위

1. !important - 무한대
   
   • 다른 선언보다 우선해서 사용
   • 동적 스타일 적용 시 유용
   • 되도록 사용하지 않는 것이 좋다❗
     
     
2. inline style - 1000점
   html 태그 내부에 style 선언
   

   <p style="font-size=15px">인라인 스타일</p>

    
3. id 선택자 - 100점
   
   
4. class / 가상 선택자 - 10점
   * 복합 선택자(.class #id) = 110점 (10(class) + 100(id))
   
   
5. 태그 선택자 - 1점
   
   
6. 전체(*) 선택자 - 0점
   
   
7. 상속

 

 

 

* 태그 선택자의 스타일과 클래스 선택자의 스타일이 겹치면 👉 클래스 선택자가 적용됨 (클래스 > 태그)

.heading {
   color: puple;
   /* 적용 */
}

h1 {
   color: green;
}

 

 

* 선택자의 우선순위가 같을 때👉 나중에 선언한 스타일 적용

.heading {
   color: puple;
}

.techit {
   color: grey; 
   /* 적용 */
}

 

 

* 본인 스타일과 상속이 겹칠 때 => 본인 스타일이 적용됨 (본인 스타일 > 상속)

.heading {
   color: inherit;
}

.heading {
   color: red;
   /* 적용 */
}

 

 

---

명확성 (Specificity) 확인하는 사이트

Specifishity :: Specificity with Fish

 

 

Specificity Calculator (명확성 계산하는 사이트)

Specificity Calculator

 

---

 

참고

 

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

 

Specificity - CSS: Cascading Style Sheets | MDN

 

 

캐스케이드  |  web.dev

 

 

[CSS]선택자 우선순위: 점수 매기기

 

 

🎨 CSS 속성 상속 개념 & 적용 우선순위