본문 바로가기
css

[css3] :root 가상 클래스

by 지구별에 2014. 11. 10.

 

 

[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 작성 예를 볼까요?

root.htm

 

html

<body>
<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

:root {background-color:#B2CCFF;  padding: 10px;}
body{ background-color: #6B9900;color:white; padding: 10px;}

 

▶실행화면

 

:root 요소 즉 html 요소는 배경이 하늘색

body 요소부터는 초록 바탕에 흰 글씨체 입니다.

 

 

 

 

:first-child, :last-child 선택자

 

[css3] :empty 가상 클래스

 

css 선택자, 선택자 종류와 사용법

 

:before , :after 가상 요소

 

반응형

'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

댓글