[CSS] 상태 선택자

선택자	형태	설명
상태 선택자	:checked	체크 상태의 input 태그 선택
	:focus	포커스를 맞춘 input 태그 선택
	:enabled	사용 가능한 input 태그 선택
	:disabled	사용 불가능한 input 태그 선택
구조 선택자	:first-child	형제 관계에서 첫 번째로 등장하는 태그 선택
	:last-child	현제 관계에서 마지막으로 등장하는 태그 선택
	:nth-child(수열)	형제 관계에서 앞에서 수열(2n)에 해당하는 태그 선택
	:nth-last-child(수열)	현제 관계에서 뒤에서 수열(2n)에 해당하는 태그 선택

상태 선택자

:checked

• checkbox,radio 타입의 input 버튼이나 선택된 option 태그를 선택하는 선택자

태그:checked + lable{
	속성:값;
}

:focus

• 태그:focus 커서가 있을때(포커스) 디자인 적용

태그:focus{
    속성:값;
}

:enabled

• input:enabled 현재 입력가능한 상태일떄 디자인 적용

태그:enabled{
    속성:값;
}

:disabled

• :disabled 현재 입력 불가능한 상태일떄 디자인 적용

태그:disabled{
    속성:값;
}

구조 선택자

• 리스트를 통해서 선택자가 선택하는 태그 확인

• 첫 번째
• 두 번째
• 세 번째
• 네 번째
• 다섯 번째
• 여섯 번째
• 일곱 번째

​

:first-child

• 태그:first-child 형제 관계에서 첫번째 태그 선택

 태그:first-child{
 	// 속성:값;
   	background-color: #800000;
}

• 첫 번째
• 두 번째
• 세 번째
• 네 번째
• 다섯 번째
• 여섯 번째
• 일곱 번째

​

:last-child

• 태그:last-child 현제 관계에서 마지막으로 등장하는 태그 선택

태그:last-child{
    // 속성 : 값
    background-color: #800000;
}​

• 첫 번째
• 두 번째
• 세 번째
• 네 번째
• 다섯 번째
• 여섯 번째
• 일곱 번째

​

:nth-child()

• nth-child(수열) 형제 관계에서 앞에서 수열 에 해당하는 태그 선택

태그:nth-child(2n(수열) ){
    속성:값 ;
    background-color: #800000;
}

• 첫 번째
• 두 번째
• 세 번째
• 네 번째
• 다섯 번째
• 여섯 번째
• 일곱 번째

​

:nth-last-child()

• nth-child(수열) 형제 관계에서 뒤에서 수열 에 해당하는 태그 선택

태그:nth-last-child(2n(수열) ){
    속성:값 ;
    background-color: #800000;
}

• 첫 번째
• 두 번째
• 세 번째
• 네 번째
• 다섯 번째
• 여섯 번째
• 일곱 번째

​