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
