안녕하세요.
하이브랩 웹표준개발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
| 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를 사용 시 자신이 원하는 결과값을 얻을 수 있습니다.