a:hover와 같은 가상클래스 (pseudo-class) 문법

선택자는 html 문서에 존재하는 것들을 지정하는 반면, 가상클래스 선택자는 html 문서 상에 없는 어떤 상태를 지정한다. a태그나 특정 요소의 클릭이벤트가 발생할 때나 입력창을 선택했을 때 등 적용가능한 가상클래스(pseudo-class)의 문법은 이렇게 된다.

selector (선택자) : pseudo-class (가상클래스) {
	property (속성) : value (속성값) ;
}

예시

// ex
div:hover {
	background-color:blue;    
}
div:hover + p {
	display:block; //show p
}

 

 

종류

 

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을 때
• :active - 마우스를 클릭했을 때
• :focus - 포커스 되었을 때 (input 태그 등)
• :first-child - 첫번째 자식
• :last-child - 마지막 자식
• :nth-child(odd) - 홀수 번째 자식
• :nth-child(n) - n번째 태그 요소 선택
• :nth-last-child(odd) - 끝에서부터 n번째 태그 요소 선택
  * 동일 레벨에 있는 요소를 선택한다.

가상 클래스

 

 

가상클래스와 연관된 내용

가상 요소 (pseudo-element)

선택자(selector)에 추가되지만 특별한 상태를 기술하는 대신, 문서의 특정 부분을 스타일할 수 있습니다. 예를 들어, ::first-line 가상 요소는 선택자에 의해 지정된 요소의 첫 줄만을 대상으로 합니다.

 

 

selector::pseudo-element (선택자) {
	property (속성) : value (속성값) ;
}

 

주의할 점은 선택자에 가상 요소를 하나만 쓸 수 있으며 문장 내 단일 선택자 뒤에 위치해야 합니다.

 

<p class="boring-text">적당히 좋고 오래되고 지루한 글입니다.</p>
<p>지루하지도 흥미진진하지도 않은 적당한 글입니다.</p>
<p class="exciting-text">MDN에 공헌하는 것은 쉽고 재밌습니다.
동작하는 예제를 새로 추가하거나 기존의 흥미진진한 예제를 더 좋게 만들기 위해서 편집 버튼을 눌러보세요.</p>

.exciting-text::after {
  content: "<- 바로 이 부분이 흥미진진합니다!"; 
  color: green;
}

.boring-text::after {
   content:    "<- 지루해요!";
   color:      red;
}

 

 

 

종류

가상 요소

• ::after - 가상의 자녀 요소를 가리키며 기본값은 inline
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop
• ::placeholder 
• ::marker 
• ::spelling-error 
• ::grammar-error 

 

 

브라우저 별 지원

브라우저	최하위 버전	지원
Internet Explorer	8.0	:pseudo-element
	9.0	:pseudo-element ::pseudo-element
Firefox (Gecko)	1.0 (1.0)	:pseudo-element
	1.0 (1.5)	:pseudo-element ::pseudo-element
Opera	4.0	:pseudo-element
	7.0	:pseudo-element ::pseudo-element
Safari (WebKit)	1.0 (85)	:pseudo-element ::pseudo-element