CSS 상속 및 캐스캐이딩

상속(Inheritance)

• 상속은 부모가 가진 특성을 자식이 물려받는 개념이다.
• CSS에서 모든 Property가 상속되는 것은 아니다.
  • (e.g. width/height, margin, display, ...)
  • 하지만 inherit 키워드를 이용하면 명시적으로 상속받게 할 수 있다.
• 모든 요소도 상속 받는 것은 아니다.

📝코드

.class1 {
    color: blue;  
}

<div class='class1'>
    <p>Hello</p>
    <p>World</p>
    <p>!!!</p>
    <button>click me</button>
</div>

💻결과

.class1 > button {
   color: inherit;
}

❓ 참조

* {
    color: red;
}
.class1 {
    color: blue;  
}

 <h1 class='class1'>Hello, <strong>World</strong></h1>

• Hello,와 World 둘다 색상이 blue일거라 생각되지만 World 색상은 Red이다. 왜냐하면 상속된 속성은 구체성을 가지지 못하기 때문에 우선순위에 밀리게 되어 전체 선택자의 속성을 가진다.

---

캐스캐이딩(Cascading)

• 하나의 요소에 하나 이상의 CSS 선언을 할 수 있다. 그렇기 때문에 규칙이 필요한데 이를 캐스캐이딩 이라고 한다.
• 캐스캐이딩은 크게 세 가지 규칙이 존재한다.

  중요도

  • 1. 프로그래머 CSS
  • 2. 사용자 CSS
  • 3. 브라우저 CSS

  구체성

  • 명확하게 특정할 수록 우선순위가 높아진다.

    !important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성

  선언순서

  • 선언 순서에 따라 우선순위가 다르다.
    나중에 선언된 스타일이 우선 적용

❓ 참조
Q. "index 1"의 폰트 색상은?

<style>
  .box { color: red !important; }
  .index > .in_item { color: pink; }
  div ul .in_item { color: orange; }
  .in_item.in1 { color: black; }
  p + ul.index { color: yellow; }
</style>

<div class="box" style="color: yellow">
  <h1 class="title">title</h1>
  <p class="desc">description</p>
  <ul class="index" style="color: blue;">  
    <li class="in_item in1">index 1</li>
    <li class="in_item ">index 2</li>
  </ul>
</div>

정답은 아래를 드래그 해주세요.

[black입니다] CSS 규칙에 따라 직접 대상 요소는 요소가 부모로부터 상속받는 규칙보다 항상 우선시 하기 때문에 아무리 important와 인라인으로 지정했더라도 li 대상 요소는 구체성이 높은 black으로 지정된다.

Reference

• https://www.w3.org/TR/selectors-3/#specificity
• https://poiemaweb.com/
• https://www.boostcourse.org/web344
• https://stackoverflow.com/questions/30459531/important-overriden-by-a-class-of-child-element