CSS Specificity

CSS 댓글 달기

CSS Specificity는 CSS 규칙들이 어떤 하나의 특정 요소에 적용되면서 CSS 규칙들 간의 두 개 이상의 충돌이 생길 경우, 브라우져가 더 한정적으로 선언되어 있는 특정 규칙을 따르게 되는 몇 가지 정해진 기본 적용 순위를 말한다.

대개의 경우, 아주 복잡한 CSS 파일들을 한꺼번에 적용할 경우 이런 충돌이 일어나는데, 이럴 때 웹 디자이너들이 주로 간편하게 선택하는 방법은 더 우선순위를 갖는 규칙에 불필요할지도 모르는 !important 속성을 적용하는 것이다. 이렇게 하면 개발자들로 하여금 어떤 한 요소를 손쉽게 변경할 수도 있게 할 것을 더 복잡하게 만는다. 그래서, CSS Specificity의 올바른 이해와 적용은 모든 웹 개발팀원들에게 바람직할 것이다.

먼저 선택자(selector)의 specificity는 다음과 같이 계산된다:

  • 선택자에 있는 ID 속성에 있는 갯수를 계산 (=a)
  • 선택자에 있는 기타 다른 속성들과 pseudo-class들의 갯수를 계산 (=b)
  • 선택자에 있는 요소 이름들의 갯수를 계산 (=c)
  • pseudo-element들은 무시

이것들의 계산법은 다음과 같다:

*              {}  /* a=0 b=0 c=0 -> specificity =   0 */
li             {}  /* a=0 b=0 c=1 -> specificity =   1 */
ul li          {}  /* a=0 b=0 c=2 -> specificity =   2 */
ul li a        {}  /* a=0 b=0 c=3 -> specificity =   3 */
a:hover        {}  /* a=0 b=1 c=1 -> specificity =  11 */
ul li a.red    {}  /* a=0 b=1 c=3 -> specificity =  13 */
li a.red:hover {}  /* a=0 b=2 c=2 -> specificity =  22 */
#candy         {}  /* a=1 b=0 c=0 -> specificity = 100 */

물론, 여기에는 빠져있지만 inline style 속성이 또 따로 지정되어 있다면 ID 속성보다도 더 높은 우선순위를 갖게 된다.

더 자세한 내용은, Eric씨와 Molly씨가 specificity에 관해 올려놓은 글을 참고.

Particletree · A Designer’s Guide to Prototyping Ajax의 글에서 따옴.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요