스타일 우선 적용 구체성 / 상속

구체성

---

선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대한 규정이 존재하는데 이를 '구체성'이라 한다. 동일한 선택자에 동일한 속성이라고 해도 보다 구체적으로 선택자를 선언한 태그에 우선권을 부여한다.

구체성의 값이 클수록 우선을 적용된다.

구체성은 4개의 숫자 값으로 구성된다. 0,0,0,0

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

선택자의 구체성 값을 잘 알아야 많은 스타일 규칙들을 정의할 때 의도하지 않은 일이 생기지 않습니다.

h1 { ... }  /* 0,0,0,1 */ 태그
body h1 { ... }  /* 0,0,0,2 */ 태그 중첩
.grape { ... }  /* 0,0,1,0 */ class이름
*.bright { ... }  /* 0,0,1,0 */ 전체선택자 class이름
p.bright em.dark { ... }  /* 0,0,2,2 */ 태그 class이름
#page { ... }  /* 0,1,0,0 */ Id이름
div#page { ... }  /* 0,1,0,1 */ 태그와 Id
<p id="page" style="color:blue">Lorem impusm dolor sit.</p> /* 1,0,0,0 */ 인라인 선언

인라인 스타일의 구체성 값이 가장 높다. 

important 키워드는 모든 구체성을 무시하고 우선권을 줄 때 사용한다. 속성값 뒤 한 칸 공백을 주고 ! 기호와 함께 사용한다. p#page { color: red !important; }

 

상속

---

상속은 어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것. 구체성과 더불어 스타일 규칙들이 문서에 어떻게 적용되는지 이해하기 위한 또 다른 중요한 핵심 개념

h1 { color: gray; }
<h1>Hello, <em>CSS</em></h1>

<em>은 부모인 <h1>의 color: gray를 상속.

그러나 모든 속성이 다 상속되는 것은 아니다.

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

상속된 속성은 구체성을 가지치 못한다.

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

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

<!-- em에는 red color가 적용된다. -->

 

cascading

---

스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙. 폭포가 내려오는 모양처럼 단계적인 이라는 의미

cascading에는 다음과 같이 3가지 규칙

1. 중요도(!important)와 CSS출처(제작자_개발자,사용자,에이전트_브라우저로 구분)
2. 구체성
3. 선언 순서

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

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

 

W3S 선택자