CSS 가상클래스에 대해 알아보자

CSS 가상클래스

 

의미

가상 클래스 선택자(Pseudo-Classes)
가상 클래스는 웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것을 말한다.

 

특징

• 문서의 특정위치, 특정영역, 특정요소를 선택하지 위하여 미리 만들어 놓은 선택자이다.
•  ':'  기호를 사용하여 요소에 대해 더 정밀한 선택 및 스타일 지정
•  스타일을 적용하는 대상을 요소명이나 속성명, 속성값에 따라 분류하는 것이 아니라 '상황'에 따라 분류한다.

 

종류

1) 링크에 대한 가상 선택자(link > hover > visited > active 지정 순서에 주의해야 한다)

- a:link : 사용된 적이 없는 링크를 선택했을 때

- a:hover : 링크 위에 마우스가 올라갔을 때

- a:visited : 이미 방문한 적이 있는 링크일 때

- a:active : 막 클릭한 순간의 링크일 때

    

2) 단락 내 특정 요소의 강조를 위한 가상 선택자

- :first-letter : 첫 글자만 선택

- 적용 가능 속성

• color
• float
• 배경 관련 속성
• 글꼴 관련 속성
• text-transform
• clear
• text-decoration
• line-height
• text-shadow
• vertical-align

- :first-line : 첫 줄 만 선택

- 적용 가능 속성

• color
• word-spacing
• 배경 관련 속성
• 글꼴 관련 속성
• text-transform
• clear
• text-decoration
• line-height
• text-shadow
• vertical-align
• letter-spacing

 

3) 포커스(강조) 피드백 효과를 위한 동적 가상 선택자(마우스 클릭 등에 의해 유발됨)

- :focus : 현재 포커스를 갖고 있을 때

outline 속성과 조합하여 사용되는 경우가 있다.(여백을 제외하고 선이 그어짐)

 

4) 자식 요소 선택을 위한 가상 선택자(구조적 가상선택자)

- :first-child : 첫 번째 자식 요소를 선택(ie6 지원 X)

- :last-child : 마지막 자식 요소를 선택(ie6,7,8 지원 X)

- :nth-child(n) : n번째 자식 요소를 선택(이때, 자식 순서는 0부터 시작)(ie6,7,8 지원 X)

 

추가)

- :only-child : 부모의 유일한 자식

- :only-of-type : 같은 유형의 유일한 형제가 없을 때

 

5) 지정된 요소의 앞, 뒤 콘텐츠를 삽입하기 위한 가상 선택자(content 생성)

- :after : 지정 요소 뒤에 위치한 공간에 삽입(ie6,7 지원 X)

- :before : 지정 요소 앞에 위치한 공간에 삽입(ie6,7 지원 X)

 

*content 속성은 요소의 전후에 :before, :after라는 의사클래스 이름을 사용하여 텍스트나 이미지 등의 content를 삽입할 때사용한다. html문서에 정보로 포함되지 않은 요소를 css에 의해 새롭게 생성해 주는 가상의 요소이다.

 

6) 해당 요소를 제외하는 선택자(부정 선택자)

- :not : 해당 요소명 제외(ie6,7,8 지원 X)

 

* : vs ::

세부적으로 의미하는 바가 차이가 있지만(적용 대상이 요소의 전체 or 부분 이냐의 차이) 기본적으로 같다.

css버전에 따른 표기법의 차이로 css2까지는 콜론(:) , css3에서는 (::)이다.

둘 다 사용해도 문제는 없으나 ie8이전은  지원되지 않는다.

 

 

 

 

참고

http://nomadwebdev.blogspot.com/2012/10/css-3.html