[css3] :root 가상 클래스
오늘부터는 가상 클래스 중 구조적 가상 클래스를 배워 보겠습니다.
우선, 가상 클래스란?
+, > 같은 조합자나 id, class 같은 단순 선택자로 선택할 수 없는
것들을 선택하게 해주는 선택자입니다.
가상 클래스는 요소의 속성, 상태, 상대적인 위치 등에 기반하여 요소를 선택하게 해줍니다.
구조적 가상 클래스(structural pseudo-classes)란?
구조적 가상 클래스란 문서 구조에서 위치나, 다른 요소와의 관계에 따라 요소를 선택
하는 선택자
[구조적 가상 클래스 종류]
:root
:only-child
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:empty
:first-child
:last-child
오늘 배울 구조적 가상 클래스는 :root 입니다.
:root 가상 클래스
:root 선택자는 문서 구조에서 root 요소(가장 상위 단계의 부모 요소) 에 적용합니다.
html에서 root 요소는 항상 html 요소입니다.
하지만 스타일 적용 우선 순위에서, 특정도(specify) 값은 html요소보다 :root 가상 클래스가 더 높습니다.
html요소가 1점, :root 가상 클래스는 class 선택자와 같은 값으로 10점임.
스타일 적용 우선 순위와 속성 강제 적용 !important
▶브라우저 지원: ie9+, chrome 4.0+, firefox 3.5+, safari 3.2+, opera 9.6+
▶문법: :root{속성:속성값;}
예
:root{padding: 10px; margin: 10px;}
html/css 작성 예를 볼까요?
html
<h3>Chapter 1</h3>
<p>Once when I was six years old I saw a magnificent picture in a book,
called True Stories from Nature, about the primeval forest.
It was a picture of a boa constrictor in the act of swallowing an animal.
Here is a copy of the drawing. </p>
<h3>Chapter 2</h3>
<p>So I lived my life alone, without anyone that I could really talk to,
until I had an accident with my plane
in the Desert of Sahara, six years ago.
Something was broken in my engine.
</p>
</body>
css
body{ background-color: #6B9900;color:white; padding: 10px;}
▶실행화면
:root 요소 즉 html 요소는 배경이 하늘색
body 요소부터는 초록 바탕에 흰 글씨체 입니다.
'css' 카테고리의 다른 글
[css3] :nth-of-type() 가상 클래스 (3) | 2014.11.12 |
---|---|
[css3] :nth-child() 가상 클래스 (1) | 2014.11.11 |
[css2] :lang 가상 클래스 (0) | 2014.11.07 |
[css3] :checked 가상 클래스 (0) | 2014.11.06 |
[css3] :enabled :disabled 가상 클래스 (0) | 2014.11.05 |
댓글