CSS 선택자
선택자
★ id 선택자(#) : #id속성값 {}
☆ tag 선택자(태그명) : 태그명 {}
★ class 선택자(.) : .class속성값 {}
☆ 모든 요소 선택자{*, 애스터리스크) : * {}
★ 기본 속성 선택자 : 선택자A [속성명 = '속성값'] {}
[속성명], [속성명= '속성값']
☆ 자식 선택자(>, 1단계 하위 ) : 부모 요소 > 자식 요소
★ 후손 선택자(띄어쓰기, 하위 모두) : 부모(조상) 요소 후손 요소
☆ 포커스가 맞춰 졌을 때(:focus) : 선택자A : focus {} (선택자A는 input 요소)★ 체크가 되었을 때(:checkd) : 선택자A : checked {} (radio, checkbox 타입만 가능)☆ 활성화 상태일 때(:enabled) : 선택자A : enabled (선택자A는 input요소)★ 비활성화 상태일 때(:disabled) : 선택자 A : disabled (선택자 A는 input요소)
☆ 마우스를 올렸을 때(:hover) : 선택자 A : hover {}★ 클릭을 하고 있을 때(:active) : 선택자 A : active {}☆ 바로 뒤 형제 선택(+) : 선택자 A + 선택자 B★ 뒤에 있는 일치하는 형제 모두선택(~,틸드) : 선택자A ~ 선택자B☆ 일반 구조 선택(위치 기준) : ->선택된 요소가 지정된 위치의 요소가 맞으면 선택하는 선택자
★ 선택된 요소가 첫 번째 요소가 맞는 경우 : 선택자 A : first-child {}
☆ 선택된 요소가 마지막 요소가 맞는 경우 : 선택자 A : last-child {}
★ 선택된 요소가 n번째 요소가 맞는 경우 : 선택자 A : nth-child(숫자) {]
선택자 A : nth-child(수열) {]
☆ 선택된 요소가 뒤에서 n번째 요소가 맞는 경우 : 선택자 A : nth-last-child(숫자) {}
선택자 A : nth-last-child(수열) {}
★ 형태 구조 선택자
-> 선택된 요소가 지정된 요소 중 몇 번째 요소가 맞으면 선택
같이 선택된 형제들 중에서 첫 번째 요소 : 선택자A : first-of-type {]
같이 선택된 형제들 중에서 마지막 요소 : 선택자A : last-of-type {}
같이 선택된 형제들 중에서 n번째 요소 : 선택자 A : nth-of-type(숫자) {}
선택자 A : nth-last-of-type(수열) {}
같이 선택된 형제들 중에서 뒤에서 n번째 요소 : 선택자 A : nth-last-of-type(숫자) {}
선택자 A : nth-last-of-type(수열) {}
☆ 부정 선택자(:not()) : 선택자 A : not(선택자B) {}
-> 특정 요소만 빼고 선택 (선택된 A 중에서 B 만 빼고 선택)
★ 여러 선택자 동시 작성 :선택자A, 선택자B {}☆ 여러 클래스를 가진 요소 선택 : .클래스명A, 클래스명B {}★ 특정 태그 중 특정 클래스를 가진 요소 선택 : 태그명.클래스명 {}