css 스타일 구체성(명시도) - id, class, 기본요소, !important

오늘은 간단하게 css 스타일 구체성에 대해서 알아봅시다.

 

다음 코드는 어떤 스타일이 적용될까요?? 

같은 태그라도 선택자를 어떻게 주냐에 따라서 결과가 다르게 됩니다.

이렇듯 선택자의 배치에 따라서 화면에 다르게 보여주기 위해서 브라우저에서 수치적으로 계산하는 것이 있는데 

이를 css 스타일 구체성이라고 합니다.

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

h2.grape { color: purple;}
h2 {color: silver;}

 

구체성의 값은 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
*.bright {...} // 0, 0, 1, 0
p.bright em.dark {...} // 0, 0, 2, 2
#page {...} 0, 1, 0, 0
div#page {...} 0, 1, 0, 1

 

- !important는 별도의 구체성은 없지만, 모든 구체성을 무시하고 우선권을 갖습니다.

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

 

p#page { color: red !important;}