본문 바로가기
반응형

구조적 가상 클래스2

[css3] :root 가상 클래스 [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-t.. 2014. 11. 10.
[css3] :empty 가상 클래스 [css3] :empty 가상 클래스 :empty 가상 클래스는 자식이 전혀 없는 요소에 적용하는 선택자입니다. 요소 안에 주석이 있어도 가능합니다. 하지만, 공백이 있으면 적용되지 않음. html p:empty{color: red;} => 적용 가능 html p:empty{color: red;} => 적용 안 됨(공백이 있으므로 비어이지 않음) html div:empty{clear:both;} => 적용 안 됨. 줄바꿈으로 인해 공백 문자가 포함돼 있음 html bar div:empty{clear:both;} => 적용 안 됨. 문자가 포함돼 있음 종류가 구조적 가상 클래스라고 되어 있는데 구조적 가상 클래스 Structural pseudo-classes란? css 선택자는 구조적 가상 클래스란 개념을.. 2014. 9. 15.
반응형