[css3] :target 가상 클래스

 

 

[css3] :target 가상 클래스

 

오늘 배워볼 가상 클래스는 :target 선택자 입니다.

 

:target은  요소의 id 와 url에 있는 #가 같을 때 적용 합니다.

 

 

예:

 

<h3 id="test">장바구니 만들기</h3>

 

<a href="www.google.com/#test>장바구니 만들기 </a>

 

 

:target은 위 링크를 클릭할 때 스타일 적용할 수가 있습니다.

 

 

▶문법

 

:target{속성:속성값;}

 

예: :target{background-color: yellow;}

 

 

▶지원 브라우저 : ie9 .0+, chrome 4.0+, firefox 3.5+, safari 3.2+, opera 9.6+

 

 

▶html/css 작성 예를 보겠습니다~

 

html

<a href="#one">menu1</a>
<a href="#two">menu2</a>
<a href="#three">menu3</a>

 

<div id="one">menu1...</div>
<div id="two">menu2 ...</div>
<div id="three">menu3...</div>  

 

 css

div{margin: 10px; padding: 10px;}

:target{ background-color: #DDD;} 

 

 

▶실행 화면 

-메뉴 클릭 전-     

 

 

-menu1 클릭 후-

 

 

메뉴를 클릭할 때마다 해당 id를 지닌 div 배경이 회색으로 표시가 됩니다

소스 다운받아 실행해 보세요 target.htm

 

 

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

 

:focus 가상 클래스

 

자손 선택자, 자식 선택자 차이

 

인접 형제 선택자, 일반 형제 선택자 차이

 

링크 가상 클래스(:link, :visited,:hover, :active)