■ 구조적 가상 선택자를 사용하는 방법을 보여준다.
▶ 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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> input:nth-of-type(2) { margin : 10px; border : 2px solid red; } p:nth-child(odd) { background-color : #aaaaaa; } </style> </head> <body> <header> <h1>CSS3 구조적 가상 선택자</h1> </header> <div class="selectortest"> 성명 : <input id="name" type="text" /><br /> 아이디 : <input id="id" type="text" /><br /> 전화번호 : <input id="phone" type="text" /><br /> </div> <p>구조적 가상 클래스 선택자는 다양한 방식으로 구조화된 페이지에서 특정 요소를 선택할 수 있다.</p> <p>이 중 :nth-of-type(n)는 동일 유형 중 n번째 요소를 선택하는 의미이다.</p> <p>2n, 2n+1과 같이 수식으로 짝홀수를 선택하도록 할 수 있다.</p> </body> </html> |