css 선택자 조건1

1.선택자를 찾을때 기호에 따른 값

=  : 속성의 값이 같을 떄 

 ~= : 특정 단어를 속성 값으로 가질 때(띄어쓰기된 이름 기준 구분)

 |= : 속성값이나 속성값- 으로 시작하는 요소를 선택  

 ^= : 속성 값이 특정 단어로 시작할 때 단어 기준이 아니라 문자열기준
                 

 $= : 속성 값이 특정 단어로 끝날 때 단어 기준이 아니라 문자열 기준 

 *= : 속성 값이 특정 단어를 포함 할때 단어 기준이 아니라 문자열 기준으로 판단. 속성 값이 있으면 다 선택된다.

 

 

2. 자손 후손

ㄱ)자손 :부모의 바로 아래의 태그들

 

 부모 >자손 >자손의자손....{

   스타일 지정

}

ㄴ)후손 : 자손을 포함해 포함된 태그들

 부모 후손{

  스타일지정

}

 

 

3.동위선택자

동위선택자는 동급관계에 있는 형제요소에 스타일을 설정할 때 사용한다.

선택자A+선택자B{...} : A 바로 뒤에 있는 B요소를 선택

선택자A~선택자B{...} : A 뒤의 모든 B의 요소를 선택

 

4.상태선택자(hover/cover)

선택자:상태{

  스타일

}

이때 선택자:상태 에는 띄어쓰기가 들어갈 경우 오류가 생겨서 적용이 안된다.

 

ㄱ)active : 해당 선택자를 클릭했을 때

ㄴ)hover : 해당 선택자 위에 마우스가 올라갔을때

 

Active테스트입니다 를 클릭했을 때

Hover테스트입니다 위에 마우스를 가져다 댔을 때

 

ㄷ)checked : radio, checkbox 타입인 input태그가 체크되었을 때 checked속성을 가진다.

ㄹ)focus : 텍스트 입력 란이 선택 되었을 때(커서가 깜박일때)

 

ㅁ)enabled : 해당 옵션등이 사용 가능(선택 가능)할 때

ㅂ)disavled  : 해당 옵션등이 사용 불가(선택 불가능)할 때