■ 가상 선택자를 사용하는 방법을 보여준다.
▶ test.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> input:hover { background-color : #ffff00; } a:visited { color : #00ffff; } p:first-line { font : 20pt Arial; } #paragraph1:first-line { color : blue; } #paragraph2:active { background-color : #dddddd; font-size : 150%; } </style> </head> <body> <header> <h1>CSS3 가상 선택자</h1> </header> <div class="selectortest"> <ul> <li><a href="#test1">test1</a></li> <li><a href="#test2">test2</a></li> </ul> <p id="paragraph1"> pseudo class select에 대해 테스트를 하고 있습니다.<br /> :first-line 선택자를 이용하면 문단의 첫번째 문장을 선택할 수 있습니다. </p> <p id="paragraph2"> 이곳을 클릭하면 배경색상과 폰트가 변경됩니다. </p> <input type="text"></input> </div> </body> </html> |