7-10. CSS 선택자 : 구체성

7-10. CSS 선택자 : 구체성

 

 가. 정의

 

   - 스타일을 적용할 어떠한 요소에 적용되는 CSS 스타일이 2가지 이상이어서 상충할 때,

     브라우저가 어떠한 스타일을 우선하여 적용할 지 선택하는 그 판단기준

   - 구체성은 선택자를 얼마나 명시적(구체적 및 정확성)으로 선언했는가를 수치화 한 것

 

 나. 구체성의 규칙

 

   - 구체성은 " 0, 0, 0, 0 " 4개의 숫자 값으로 이루어져 있음

   - 아래와 같이 선택자마다 각자 구체성 값이 입력되는 자리가 있으며, 선택자 하나당 그 값은 1 임

ㆍ 1, 0, 0, 0 : 직접 HTML 태그 내에 선언한 인라인 스타일 방식   ㆍ 0, 1, 0, 0 : 선택자에 있는 id 속성값(#)   ㆍ 0, 0, 1, 0 : 선택자에 있는 class 속성값(.), 가상 class(:), 기타속성   ㆍ 0, 0, 0, 1 : 선택자에 있는 모든 요소(태그), 가상요소(태그)(::)   ㆍ 0, 0, 0, 0 : 선택자에 있는 전체선택자(*)   ㆍ !important : 이 키워드는 구체성 값은 없지만, 모든 구체성 값을 무시하고 우선권을 갖음                             CSS 규칙의 속성값 맨뒤 한 칸 공백 후 !important 입력   ㆍ 전체선택자 및 조합자(>, +, ~)는 구체성에 영향을 주지 않음

 

 다. 예시

1   h1{...}   2   body h1{...}   3   .grape{...}   4   * .bright{...}   5   p .bright em .dark{...}   6   #page{...}   7   div #page{...}   8 <p id="page">...</p>   9   h1{... !important}

→  0, 0, 0, 1 →  0, 0, 0, 2 →  0, 0, 1, 0 →  0, 0, 1, 0 →  0, 0, 2, 2 →  0, 1, 0, 0 →  0, 1, 0, 1 →  1, 0, 0, 0 →  구체성 값 없으나 우선권 있음

   - 위 표에서 가장 구체성 값이 높은 코드는 8번이나, 9번이 !important 로 제일 우선권을 갖음