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 51 52 53 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style> /* a태그 아이디를 통해 내부링크로 스크롤 이동시.. 해당 타겟이 되는 요소에 css를 적용 */ :target { /* :target 가상클래스는 주소창 #뒤에 id를 가지고 있는 요소를 가르킨다. */ background: red; } #that10:target { /* 아이디가 #that10인 a태그의 타겟요소에 css적용 */ background: orange; } </style> </head> <body> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td id="that4">4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td id="that10">10</td> </tr> </table> <p><a href="#that2">타겟2</a></p> <!-- #that2란 타겟은 존재하지 않음 --> <p><a href="#that4">타겟4</a></p> <p><a href="#that10">타겟10</a></p> <script src="./lib/jquery/1.9.1/jquery.min.js"></script> <script> // 요소 확인 테스트 $('a').click(function() { console.log($(":target")); console.log($("td:target")); console.log($("td").is(":target")); // td요소 중 현재 주소창에 :target 요소 filter }); </script> </body> </html> |
반응형
'CSS' 카테고리의 다른 글
| [CSS] Font Awesome - 벡터 폰트 아이콘 (0) | 2015.04.06 |
|---|---|
| [CSS] border 투명도(opacity) 적용하기 (0) | 2015.03.27 |
| [CSS] table-cell div 수직 수평 정렬 (0) | 2015.01.28 |
| [CSS] user-select:none 텍스트 드레그 막기 (0) | 2015.01.23 |
| [CSS] 음수 margin을 이용한 div 수직, 수평 정렬 (0) | 2015.01.07 |
