[CSS 선택자(4)]

[상속 제어]

/* 예시(CSS) */
div {
  border: 1px solid silver;
  margin: 2px;
}

.parent {
  color:blue;
  font-size : 20px;
}

<!-- 예시(HTML) -->
<div class="parent">
    parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>

여기서 CSS효과가 부모<div>에서 자식<div>로 상속됩니다.
클래스가 parent인 태그에 효과를 주기로 하다가 parent, child1, child2 모두 파란 글씨 효과가 젹용됩니다.

이 때, 이러한 상속을 제어하기 위해서 CSS속성에 대한 상속 제어값을 입력하면 됩니다.

• initial : 브라우저가 지정한 초깃값 적용.(상속을 무시)
• (속성)all : 모든 속성 선택

/* 예시(CSS) */
.parent {
  color:blue;
  font-size : 20px;
}
.child2 {
	color:initial;	/* 색깔만 */
}
.child3 {
	all:initial;	/* 전부 다 */
}

<!-- 예시(HTML) -->
<div class="parent">
    parent
    <div class="child1">child1</div>
  	<div class="child2">child2</div>	<!-- 색깔만 초깃값 -->
    <div class="child3">child3</div>	<!-- 색깔, 글자크기까지 모든 속성이 초깃값 -->
</div>

• inherit : 무조건 상속을 받게 함.

/* 예시(CSS) */
.parent1, .parent2 {
  color: blue;
  font-size : 40px;
}

.child1 {
  color: red;
}

.child2 {
  all: initial;
  /* child2에 설정된 모든 CSS값을 기본값으로 돌린다. */
}

/* parent2 선택자의 요소가 포함하고 있는 모든 요소 선택 */
.parent2 * {
  all : inherit;
}

  <h3>parent1</h3>
  <div class="parent1">
    parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>

  <h3>parent2</h3>
  <div class="parent2">
    parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>

결과 : parent2의 child1,2가 CSS의 all : inherit에 의해 각각 적용되었던 스타일링을 무시하고 parent2의 스타일링을 무조건 상속받게 됩니다.

• unset : 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용.

용도) unset을 적용시킴으로써 부모로부터 어떤 스타일을 상속받는지를 확인.

/* 예시(CSS) */
div {
  border: 1px solid silver;
  margin: 2px;
}

.parent1, .parent2 {
  color: blue;
  font-size : 40px;
}

.child1 {
  color: red;
}

.child2 {
  all: initial;
  /* child2에 설정된 모든 CSS값을 기본값으로 돌린다. */
}

/* parent2 선택자의 요소가 포함하고 있는 모든 요소 선택 */
.parent2 * {
  all : inherit;
}

  <h3>parent1</h3>
  <div class="parent1">
    parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>

  <h3>parent2</h3>
  <div class="parent2">
    parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>

( 결과 )

CSS에서의 div, .child1, .child2는 .parent2에 상속된 값이 아니므로 보더값이 사라지고 child1, child2 각자에게 부여된 속성이 무시되며, parent2안에 있는 child들이 parent2의 속성 값을 상속받습니다.

[우선 순위]

CSS스타일을 적용시킬 때 우선 순위에 따라 먼저 적용되는 스타일링이 달라집니다.

1. 선언된 곳 (어느 것이 더 위에 있는가)
2. 명시도 (무언가 더 뚜렷하게 보여지는 것. 적용범위가 적을 수록 명시도 높음)

   명시도 순위
   !important(진짜 급박할 떄만 사용) > inline style > ID > Class/Attribute/Pseudo Class
   Type (Tag) > * > inherited

3. 코드 위치