CSS_구체성

어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결정하기 위해

브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택합니다.

 

요소를 선택하는 데는 여러 방법이 있습니다.

따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있습니다.

만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까요?

 

구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로,

구체성의 값이 클수록 우선으로 적용이 됩니다.

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

 

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

ex:

h1 {} : 0,0,0,1

body h1 {} : 0,0,0,2

.class {} : 0,0,1,0

*.class {} : 0.0.1.0

p.class span.class2 {} : 0.0.2.2

#id {} : 0,1,0,0

 

---

인라인스타일

인라인스타일(HTML 선언 내에서 스타일을 지정한 경우)의 구체성 값은 1,0,0,0이며 규칙들 중 가장 큰 구체성을 갖습니다.

인라인 스타일이 구체성이 가장 높기때문에 #page는 blue색상으로 보여집니다.

---

!important키워드

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

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