[css3] :root 가상 클래스



[css3] :root 가상 클래스


오늘부터는 가상 클래스 중 구조적 가상 클래스를 배워 보겠습니다.


우선, 가상 클래스란?


 +, > 같은 조합자나 id, class 같은 단순 선택자로 선택할 수 없는


것들을 선택하게 해주는 선택자입니다.


가상 클래스는 요소의 속성, 상태, 상대적인 위치 등에 기반하여 요소를 선택하게 해줍니다.



구조적 가상 클래스(structural pseudo-classes)란?


구조적 가상 클래스란 문서 구조에서 위치나, 다른 요소와의 관계에  따라 요소를 선택

하는 선택자



[구조적 가상 클래스 종류]





오늘 배울 구조적 가상 클래스는 :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 작성 예를 볼까요?




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




: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
[css3] :root 가상 클래스  (0) 2014.11.10
[css2] :lang 가상 클래스  (0) 2014.11.07
[css3] :checked 가상 클래스  (0) 2014.11.06
[css3] :enabled :disabled 가상 클래스  (0) 2014.11.05
css 2014. 11. 10. 11:23

댓글을 달아 주세요

Powerd by Tistory, designed by criuce