CSS Selector 우선순위

\ by

안녕하세요.

하이브랩 웹표준개발1팀 양희성입니다.

 

CSS를 적용하는데는 다양한 방법을 사용합니다. 그리고 다양한 방법을 동시에 적용할 수 있습니다.

그렇기 때문에 엘리먼트에 적용되는 스타일이 충돌될 수 있습니다.

CSS의 적용 우선순위를 알고 있다면, 이 문제를 해결할 수 있습니다.

 

CSS Selector 의 우선순위는 다음과 같이 계산이 됩니다.
(a는 100자리수, b는 10자리수, c는 1자리수로 표현하여 계산함)

  • 선택자에 포함된 id의 전체 수(=a)
  • 선택자에 포함된 class 선택자, 속성 선택자, 가상 클래스(pseudo-classes) 선택자의 전체 수(=b)
  • 선택자에 포함된 가상 엘리먼트(pseudo-elements)와 요소 선택자의 전체 수(=c)
  • universal selector(*)는 계산에 포함하지 않는다.
pseudo-elements
:first-letter, :first-line, :before, :after, :selection
pseudo-classes
:link, :visited, :active, :hover, :focus, :first-child, :lang(C), :target
CSS Selector specificity Examples
Selector a b c specificity
* 0 0 0 0
LI 0 0 1 1
UL LI 0 0 2 2
UL OL+LI 0 0 3 3
H1 + *[REL=up] 0 1 1 11
UL OL LI.red 0 1 3 13
LI.red.level 0 2 1 21
#x34y 1 0 0 100
#s12:not(FOO) 1 0 1 101

Examples

CODE


*{color:yellow}
p{color:gray}
p#tx{color:red}
p.tx{color:black}

CSS Selector


우선순위

* = 0, p = 1 , p.tx = 11 , p#tx = 101

결과

CSS Selector

CODE


ul li{color:red}
ul li:first-child{color:black}
li{color:gray}

CSS Selector
CSS Selector

우선순위

li = 1 , ul li = 2 , ul li:first-child = 3

결과

  • CSS Selector
  • CSS Selector

CODE


li{color:gray}
li:first-line{color:blue}
ul li{color:red}
ul li:first-child{color:black}

CSS Selector1
CSS Selector2
CSS Selector
CSS Selector2
CSS Selector
CSS Selector2

우선순위

li = 1 , ul li = 2 , ul li:first-child = 3, ul li:first-child :12

결과

  • CSS Selector1
    CSS Selector2
  • CSS Selector
    CSS Selector2
  • CSS Selector
    CSS Selector2

CODE


li{color:black}
#wrap li{color:blue}
#wrap.content .lst li.last{color:#919191}
.content .lst li.first{color:orange}
.content li:first-child{color:red}
.content .lst .last{color:green}


CSS Selector
CSS Selector
CSS Selector


우선순위

li = 1 , #wrap li = 101, #wrap.content .lst li.last = 131, .content li.first = 21, .content li:first-child = 21, .lst .last = 20

결과

  • CSS Selector
  • CSS Selector
  • CSS Selector

 

결과

 

위의 예제와 같이 마지막에 사용 된 selector가 결과에 나타나지 않을 수 있습니다.

그렇기 때문에, css selector를 사용할때에는 더욱 더 신중하게 생각을 하고 작성을 해야 추후 selector를 사용 시 자신이 원하는 결과값을 얻을 수 있습니다.

Posted in: Case Study