Inheritance

일부 스타일 속성은 HTML 트리 구조를 따라서 부모 요소에서 자식 요소로 상속되게 된다.

예를 들어 font나 color 등은 상속된다.
따라서 body에서 font나 color를 지정해놓으면 자식 요소에게 물려줄 수 있다.

h2 { color: green; }
#sidebar h2 { color: inherit; }

border, width 등은 대표적으로 상속되지 않는 속성이다.
(이런 속성이 상속되면 얼마나 끔찍할지 상상해보라. 예를 들어 부모 요소의 width가 50%인데 상속이 되면 자식 요소는 어떨까.)

 p { border: medium solid }

<p>This paragraph has <em>emphasized text</em> in it.</p>

=> em 태그 내의 문구는 border가 지정되지 않는다.

요소가 상속되는지 아닌지는 아래 링크에서 확인할 수 있다.
https://www.w3.org/TR/CSS21/propidx

Cascading

동일한 요소를 두고 여러 스타일 속성이 빈번하게 충돌한다.
두 가지 규칙을 소개한다.
(자세한 내용은 아래를 참고하라.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)

1. 동일하지 않은 선택자끼리의 우선 순위는 아래와 같다.

Specificity

최우선: !important
그 다음: inline styles
1. id selectors
2. class, pseudo-class, attribute selectors
3. element, pseudo-element selectors

!important와 inline styles는 특이한 경우니깐 기억하자.
1~3은 금은동이라고 생각하면 된다.
즉, 1-0-0이 0-2-0보다 우선한다.

뒤에 설명할 universal selector와 combinator는 specificity를 증가시키지 않는다.
:not(x)에서 negation selector는 값이 없다. 다만 인자가 specificity를 증가시킨다.

아래 링크를 보면 단번에 이해가 될 것이다.
https://specifishity.com/
https://www.w3.org/TR/selectors/#specificity-rules

2. 동일한 specificity면 나중에 작성된 스타일이 우선한다.

h1 { color: red; }
h1 { color: blue; }

<h1>This is my heading.</h1>

=> h1은 파란색으로 나온다.

Combinator

combinator는 DOM 성능 저하의 원인이다.
하지만 id나 class와 결합하면 괜찮다.

descendant selector (space)

특정 요소의 후손은 모두 선택된다.

div p {
  background-color: yellow;
}

=> div의 후손인 p는 모두 선택된다.
https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_element

child selector (>)

특정 요소의 자식은 모두 선택된다.
직계자식(?)만 된다. 후손은 안된다.

div > p {
  background-color: yellow;
}

=> div의 자식인 p는 모두 선택된다.
https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_gt

adjacent sibling selector (+)

1) 특정 요소의 형제이며 2) 붙어있고 3) 뒤따르면 선택된다.

div + p {
  background-color: yellow;
}

https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_pluss

general sibling selector (~)

1) 특정 요소의 형제이며 2) 뒤따르면 모두 선택된다.

div ~ p {
  background-color: yellow;
}

https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_element_tilde