HTML, CSS #3

다양한 Selector

실제 환경에서는 더욱 다양한 방법으로 사용한다

• 전체 셀렉터

* { }
# 모든 태그

• Tag 셀렉터

section, h1 { }
# section 태그와 h1 태그

• ID 셀렉터

#only { }

• class 셀렉터

.widget { }
.center { }

• attribute 셀렉터 (암기x)

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

단어 중 있다면
# ~= : 띄어쓰기로 구분된
# |= : -로 연결되어 있어도 포함한다면
# ^= : 이 단어로 시작한다면
# $= : 이 단어로 끝난다면
# *= : 포함한다면

• 후손 셀렉터 : (부모 태그) (후손 태그)
  - 부모 태그 속에 있는 모든 태그(후손)

header h1 {}
# header 속에 있는 모든 h1 태그

• 자식 셀렉터 : (부모 태그) > (자식 태그)
  - 부모 태그 속 바로 아래 단계 태그

header > p { }
# header 속 바로 아래 단계에 속한 모든 p 태그

• 인접 형제 셀렉터
  - 부모는 같음. 바로 다음에 오는 태그만 선택

section + p { }
# section 태그 뒤 바로 오는 p 태그 하나만

• 형제 셀렉터
  - 부모는 같음. 바로 올 필요가 없음

section ~ p { }
# section 태그 뒤의 p 태그들

• 가상 클래스 (pseudo-class)

a:link { }	# 방문하지 않은 링크
a:visited { }	# 이미 방문한 링크
a:hover { }	# 위에 마우스 커서를 올렸을 때
a:active { }	# 활성화 상태거나 클릭했을 때
a:focus { }	# 키보드 포커스가 되었을 때

• 요소 상태 셀렉터

input:checked + span { }
# checked input 태그의 다음 span 태그

input:enabled + span { }
# enabled input 태그의 다음 span 태그

input:disabled + span { }
# disabled input 태그의 다음 span 태그

• 구조 가상 클래스 셀렉터 (암기x)

p:first-child { }
# 첫 번째 자식인 모든 p 태그

ul > li:last-child { }
# ul 태그의 마지막 자식인 모든 li 태그

ul > li:nth-child(2n) { }
# ul 태그의 모든 짝수 번째 li 태그

section > p:nth-child(2n+1) { }
# section 태그의 모든 홀수 번째 p 태그

ul > li:first-child { }
# ul 태그의 첫 번째 자식인 모든 li 태그

li:last-child { }
# 마지막 자식인 모든 li 태그

div > div:nth-child(4) { }
# div 태그의 네 번째 자식인 모든 div 태그

div:nth-last-child(2) { }
# 뒤에서 두 번째 자식인 모든 div 태그

section > p:nth-last-child(2n + 1) { }
# section 태그의 홀수 번째 자식인 모든 p 태그

p:first-of-type { }
# 모든 첫 번째 p 태그

div:last-of-type { }
# 모든 마지막 div 태그

ul:nth-of-type(2) { }
# 모든 두 번째 ul 태그

p:nth-last-of-type(1) { }
# 모든 마지막 두 번째 p 태그

• 부정 셀렉터

input:not([type="password"]) { }
# 속성 "type"이 "password"가 아닌 모든 input 태그들

div:not(:nth-of-type(2)) { }
# 두 번째가 아닌 모든 div 태그들

• 정합성 확인 셀렉터

input[type="text"]:valid { }
# 속성 "type"이 "text"면서 올바른 (valid)
  모든 input 태그들

input[type="text"]:invalid { }
# 속성 "type"이 "text"면서 바르지 않은 (invalid)
  모든 input 태그들