css 구체성

 

구체성이란?

 

선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것이다. 

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

 

구체성은 4개의 숫자 값으로 이루어져 있습니다.

값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖습니다.

구체성은 아래의 규칙대로 계산됩니다. 

•  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 */
*.bright { ... }  /* 0,0,1,0  전체 선택자와 조합된 클래스의 선태자라서 */
p.bright em.dark { ... }  /* 0,0,2,2 클래스 2개, 요소 2개라서 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1  요소 1개, id 1개 */

여기서 가장 높은 구체성은 맨 아래줄의 div#page, 그 다음은 #page 이다. 

 

 

---

인라인 스타일

 

css

p#page { color: red; } /* 0, 1, 0, 1*/

html

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

 

⬆️위처럼 설정해두면 빨간색이 나올까? 파란색이 나올까?

 

정답은!!! 파란색!

 

 

인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖는다.

 

 

---

important

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖는다.

important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 쓴다.

 

css

p#page { color: red !important; }

html

 

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

⬆️위처럼 설정해두면 빨간색이 나올까? 파란색이 나올까?

 

정답은!!! 빨간색!

 

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖기 때문이다!