가상 선택자 : 선택된 엘리먼트의 상태에 의해 CSS 스타일을 다르게 적용
형식) 선택자:상태 => 선택된 엘리먼트에 따라 사용 가능한 상태가 존재
link 상태 : a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번도 요청하지 않은 상태
a:link { color: lime; }
visited 상태 : a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번이상 요청하여 응답받은 상태
a:visited { color: gold; }
active 상태 : 선택된 엘리먼트에 마우스 커서를 위치하여 버튼으로 누르고 있는 상태
a:active { color: red; }
hover 상태 선택된 엘리먼트에 마우스 커서가 위치히고 있는 상태
a:hover {
color: blue;
text-decoration: underline;
}
first-child : 선택된 다수의 엘리먼트 중 첫번째 엘리먼트 선택
ul li:first-child { color: red; }
last-child : 선택된 다수의 엘리먼트 중 마지막 엘리먼트 선택
ul li:last-child { color: green; }
nth-child(X) : 선택된 다수의 엘리먼트 중 앞에서 X번째 위치한 엘리먼트 선택
ul li:nth-child(2) { color: blue; }
nth-last-child(X) : 선택된 다수의 엘리먼트 중 뒤에서 X번째 위치한 엘리먼트 선택
nth-child(2n-1) : 선택된 다수의 엘리먼트 중 홀수번째 위치한 엘리먼트 선택 //nth-child(2n-1) 대신 :nth-child(odd) 사용가능
nth-child(2n) : 선택된 다수의 엘리먼트 중 짝수번째 위치한 엘리먼트 선택 //nth-child(2n) 대신 :nth-child(even) 사용 가능
nth-child(Xn) : 선택된 다수의 엘리먼트 중 X의 배수번째 위치한 엘리먼트 선택
not(선택자) : 선택자의 엘리먼트를 제외한 나머지 엘리먼트 선택
예시
input:not([type="text"]) { border: 1px solid orange; }
disabled : 선택된 엘리먼트가 비활성화 상태인 경우
selected : 선택된 엘리먼트(select - option)가 선택된 상태인 경우
focus : 선택된 엘리먼트(입력태그)에 입력촛점이 위치한 상태인 경우
예시
input[type="text"]:disabled { border: 2px dotted red; }
input:focus { border: 3px double green; }
