CSS 적용과정 :: cascade, specificity, inheritance에 관하여

선택자 충돌 시

<p class="special"></p>

/*css*/
.special{
 color: blue;
}
p{
 color: red;
}

 

css는 cascade와 specificity라고 불리는 rule을 가지고 있고, 해당 rule에 따라 충돌 시 더 강한 선택자가 적용된다.

1. cascade rule : 뒤에 적용된 스타일이 앞선 스타일을 덮어쓴다.
2. specificity rule : 요소를 더 특정하는 선택자가 스타일을 차지한다.
   • 따라서 위의 예제에서 specificty rule에 의해 color는 blue가 된다.

 

specificity

specificity는 4가지의 단위로 측정된다.

• Thousands : style 속성 내에 정의되어 있는 style(inline style)일 경우
• Hundreds : ID selector를 사용하여 정의한 style일 경우
• Tens : Class selector를 사용하여 정의한 style일 경우
• Ones : 이외의 selector
• 예외 : universal selector(*), combinators(+, >, ~, ''), negation pseudo-class (:not)는 specificity에 영향이 없다.

해당 단위들은 이해를 돕기 위한 단위일 뿐 Ones가 10개 모였다고 Tens보다 우선순위가 높아지진 않는다.

 

!importance

해당 명령어를 style 정의 뒤에 붙임으로써 specificity를 높일 수 있지만, !importance를 붙인 style을 다시 override하기 위해서는 더 높은 specificity를 가지고 !importance를 사용해야 한다.

다음과 같은 순서로 css는 적용된다.

1. user agent style sheet : 브라우저 등의 기본 스타일
2. normal declarations in user style sheets : 유저의 커스텀 스타일
3. normal declarations in author style sheets : 웹 개발자가 세팅한 스타일
4. important declarations in author style sheets : 개발자 important 스타일
5. important declarations in user style sheets : 유저 important 스타일

 

Inheritance

inheritance도 css의 적용을 설명하기 위해 중요한 요소이다. 어느 한 요소에 준 style이 해당 요소의 자손들에게 그대로 전달되는 것을 inheritance라고 한다.

어떤 속성들은 자동으로 상속되고 어떤 속성들은 상속되지 않는다. 예를 들어 color, font-family와 같은 속성들은 상속되지만 margin, padding, border 와 같은 스타일 속성은 상속되지 않는다. css는 inheritance를 조정하기 위한 4개의 속성값을 가지고 있다.

1. inherit : 상속받아 사용한다.
2. initial : 각 속성 별 default 값이 적용된다.
3. unset : 각 요소의 기본 속성 값이 inherit인지 initial인지에 따라 적용된다.
4. revert : unset과 비슷하지만 속성이 아닌 브라우저의 기본 속성 값으로 적용된다.

all이라는 속성으로 모든 속성을 어떤 속성값으로 사용할 지 결정할 수 있다.

.hi{
 all : unset;
}

 

inherit 되는 속성

• color
• cursor
• font
• line-height
• letter-spacing
• list-style
• text-align
• visibility
• white-space
• word-spacing