가상 클래스 선택자(Pseudo class selector)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>가상 클래스 선택자</title> <style> /* class="foo"인 엘리먼트 중 홀수 번째 자식인 엘리먼트를 선택 */ .foo:nth-child(odd) { color:red; } </style> </head> <body> <ul> <li class="foo">1</li> <!-- .foo:first-child --> <li class="foo">2</li> <li class="foo">3</li> <!-- .foo:nth-child(3) --> <li class="foo">4</li> <li class="foo">5</li> <!-- .foo:last-child --> </ul> </body> </html>.foo:first-child : class="foo"인 엘리먼트 중 첫번째 자식인 엘리먼트를 선택
.foo:last-child : class="foo"인 엘리먼트 중 마지막 자식인 엘리먼트를 선택
.foo:nth-child(n) class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 선택
.foo:nth-child(odd) class="foo"인 엘리먼트 중 홀수 번째 자식인 엘리먼트를 선택
.foo:nth-child(even) class="foo"인 엘리먼트 중 짝수 번째 자식인 엘리먼트를 선택
.foo:nth-child(3n+1) class="foo"인 엘리먼트 중 3n+1번째 자식인 엘리먼트를 선택<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> /* focus : 요소를 클릭 또는 탭하면 red로 변신! */ input:focus { color: red; } /* hover : 커서(마우스 포인터)가 요소 위에 올라가 있으면 green으로 변신! */ input:hover { color: green; } /* active : 마우스 누르고 있으면 퍼런색! */ input:active { color: blue; } </style> </head> <body> <form action="./index.html" method="get"> <label for="id">ID</label><input id="id" name="id" type="text" /> <label for="pw">PW</label><input id="pw" name="pw" type="text" /> </form> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> /* enabled : 선택, 클릭, 입력 등 모두 퍼런색! */ input:enabled { color: blue; } </style> </head> <body> <form action="./index.html" method="get"> <label for="id">ID</label><input id="id" name="id" type="text" /> <label for="pw">PW</label><input id="pw" name="pw" type="text" /> </form> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> /* enabled : 선택, 클릭, 입력 등 모두 퍼런색! */ input:enabled + span { color: blue; } /* red는 선택 비활성화! */ input:disabled + span { color: red; } /* checked 하면 green! 변신*/ label + input:checked + span { color: green; } </style> </head> <body> <form action="./index.html" method="get"> <label for="이름">이름</label> <input id="이름" name="name" type="text" /><span>O</span><br /> <label for="남">남</label> <input id="남" name="성별" type="radio" value="male" /><span>O</span><br /> <label for="여">여</label> <input id="여" name="성별" type="radio" value="female" /><span>O</span><br /> <label for="우주인">우주인</label> <input id="우주인" name="성별" type="radio" value="female" disabled/><span>O</span> </form> </body> </html>
웹개발