선택자

선택자 심화

기본 선택자

• tag 선택자 : tag 이름
• class 선택자 : #
• id 선택자 : .

응용 선택자

• 선택자 결합 : 붙여쓰기
  ( A.classname = A 태그 이면서 classname을 가진 요소 )

• 여러개 선택하기 : ,
  ( A,B = 둘 다 선택 )

• 모두 선택 : *

• 특정 요소 제외 : :not(A)
  ( A:not(B) = A 선택자 중 B는 제외 )

• 타입 첫번째 선택자 : :firsto=-of-type
  ( A:first-of-type = 첫번째 A 선택 )

• n번째 유형 선택자 : :nth-of-type(N)
  ( 짝수 = even, 홀수 = add, 몇번째 = n, 수식 = an+b번째 선택자 )

• 자식이 없는 요소 선택자 : empty

• 속성 선택자 : [ ]

형제 선택자

• 인접 형제 선택자 : +
  ( A + B = A, B가 같은 계층에 있을 때 A 바로 뒤에 B를 선택자로 지정 )

• 일반 형제 선택자 : ~
  ( A ~ B = A, B가 같은 계층에 있을 때 A 뒤의 모든 B를 선택자로 지정)

자식 선택자

• 자손 선택자 : 띄어쓰기
  ( A B = A 모든 자손 중 B 선택)

• 자식 선택자 : >
  ( A > B = A 직계 자식 중 B 선택 )

• 특정 자식 선택자
  첫번째 자식 : :first-child
  ( A:first-child = A의 첫번째 자식 선택 )
  유일한 자식 선택자 : :only-child
  ( A:only-child = 자식이 1개인 A의 자식 선택 )
  n번째 자식 선택자 : :nth-child(n)
  ( A:nth-child(n) ) = A의 n번째 자식 선택 )

a 선택자

a[href] : hreft 속성을 가지고 있는 모든 a태그 선택

a[href:"https://naver.com"] : href="https:naver.com" 속성을 가진 모든 a태그 선택

a[href^="https"] : href 값이 "https"으로 시작하는 a태그 모두 선택

a[href$="com"] : href 값이 "com"으로 끝나는 a태그 모두 선택

a[href*="naver"] : href 값에 "naver"를 포함하는 a태그 모두 선택