4. 구체성(명시도)

• 어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택한다.

만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면??

h1 { color: red; }
body h1 { color: green; }

두 규칙은 모두

<h1>

을 선택하는데 두 규칙이 지정하는 스타일은 다르다.
어떻게 표현될지 궁금해지는데,

이 때, 선택자에는 우선순위를 정한 규칙(=구체성)이 있기 때문에 선택자의 구체성의 값에 따라 우선적으로 적용한다.

0, 0, 0, 0

위와 같이 구체성은 4개의 숫자 값으로 이루어져 있다.

• 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
• 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
• 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
• 전체 선택자는 0, 0, 0, 0을 가진다.
• 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
• !important는 모든 구체성을 무시. 이게 먼저다.

중요도
!important > inline > id > class > 선택자 > 전체선택자, 조합자(+, >) 영향 x

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

5. 상속

• 부모가 자식에서 상속한다는 말처럼
• 어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것을 말한다.
• 상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아니다.

  margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다!

* { color: red; }
h1#page { color: gray; }

<h1 id="page">Hello, <em>CSS</em></h1>

em에는

color:red (O)
color:gray (X)
=> 상속된 속성은 아무런 구체성을 가지지 못하기 때문이다!

6. 캐스케이딩(cascading)

• 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙이다.

만약 구체성이 같은 두 규칙이 동일한 요소에 적용된다면??

1) cascading 규칙

1. 중요도(!important)와 출처
2. 구체성
3. 선언 순서

• 모든 스타일은 아래의 규칙에 따라 단계적으로 적용된다.
  

1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
   1. 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다.
   2. 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.
2. 스타일 규칙들을 출처에 따라 분류합니다.
   1. 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.
3. 스타일 규칙들을 구체성에 따라 분류합니다.
   1. 구체성이 높은 규칙들이 우선합니다.
4. 스타일 규칙들을 선언 순서에 따라 분류합니다.
   1. 뒤에 선언된 규칙일수록 우선합니다.

<p id="bright">Hello, CSS</p>

p#bright { color: silver; } 
p { color: red; }

위의 경우에는 구체성에 따라 color: silver가 적용된다.

p { color: silver; }
p { color: red; }

위의 경우에는 선언 순서에 따라 color: red가 적용된다.