CSS 상속 및 캐스캐이딩

jiseong·2021년 7월 29일

T I Learned

목록 보기

9/291

상속(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으로 지정된다.