구체성

비전공자를 위한 HTML/CSS 강의 공부 기록입니다.

1. 구체성

한 요소에 상반되는 스타일이 선언되었을 때 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙을 구체성이라고 한다.
구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로,
구체성의 값이 클수록 우선 적용된다.

0,0,0,0

구체성은 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
#page { ... }	0,1,0,0
div#page { ... }	0,1,0,1

2. 인라인 스타일의 구체성

인라인 스타일 방식은 1, 0, 0, 0으로 가장 큰 구체성을 갖는다.

따라서

p#page { color: red; }

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

외부 스타일 규칙과 동시에 스타일 규칙이 상반될 경우 인라인 스타일의 규칙이 우선하여 위 코드에서 <p> 태그의 글자색은 파란색으로 나타난다.

3. Important

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖는다.
important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 쓴다.

p#page { color: red; !important }

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

위의 <p>에는 important로 인해 color: red가 적용된다.

※ cascading 규칙

cascading 규칙에 따라 구체성이 동일할 경우 뒤에 선언된 규칙일 수록 우선한다.