❓ CSS 선택자

❓ selector ( 선택자 )

✔️ 복합 선택자 ?

• 자손 선택자
  • div p { ... }
  • 공백을 사용하여 하위 요소 중 해당 태그 ‘모두’를 선택
• 자식 선택자
  • div > p { ... }
  • ‘바로 아래의 직접적인 자식’ 요소만 스타일 적용
• 그룹 선택자
  • h1, h2, p { ... }
  • 여러 개의 선택자를 그룹으로 묶어 스타일 지정
  • 같은 스타일을 여러 요소에 적용 !

✔️ 가상 선택자

• 선택자에 추가하는 키워드
• 특정한 목적을 위해 사용되는 선택자
  • 요소의 내부 구조나 상태에 따라 스타일을 다르게 적용하고자 할 때 유용 !
• 가상 클래스 선택자
  • *‘특정 상태’**에 있는 요소를 선택하여 스타일 적용
  • :hover: 마우스 커서가 요소 위에 있을 때 적용할 스타일
  • :active: 사용자가 요소를 클릭 등 활성화 했을 때 적용할 스타일
  • :focus: 요소가 포커스를 받았을 때 적용할 스타일( input 커서 적용 상태 등 )
• 가상 요소 선택자
  • *‘특정 요소’**의 일부분에 스타일 적용
  • ::before, ::after:: 요소의 ‘앞’, ‘뒤’에 컨텐츠 추가
  • ::first-letter, ::last-letter, ::first-child, ::last-child ...
    • p::last-child

🍎 CSS Dinner: CSS 선택자 연습하기 !

• 선택자 결합하기

  • A.className

    • 다른 선택자와 클래스 선택자 결합
    • 특정 선택자와 특정 클래스를 모두 가진 요소 선택
      • #id.className, tag.className...

  • A *

    • A 선택자의 자손 모두를 선택
      • div * .className *

  • A + B

    • 인접 형제 선택자(Adjacent Sibling Selector)
    • A 바로 뒤에 오는 B 선택

  • A ~ B

    • 형제 선택자(General Sibling Selector)
    • A 와 같은 레벨의 B 선택

  • :only-chlid

    • 해당 요소가 부모 요소의 유일한 자식인 경우에만 선택
    • p:only-child: 부모 요소에 p태그 하나만 들어있을 경우 선택
    • ul li:only-child: 부모 요소인 ul 태그 안에 자식 요소로 li가 한개만 들어있을 경우 선택

  • :last-child

    • 해당 요소가 부모 요소의 마지막 자식인 경우에만 선택
    • p:last-child: 부모 요소의 마지막 자식이 p 태그인 경우 선택

  • :nth-child(A)

    • 부모 요소의 자식 중 A번째인 요소 선택
    • p:nth-child(8): 8번째 자식이 p태그인 경우 선택
    • div p:nth-child(2): 부모 요소가 div이고 p태그가 2번째 자식인 경우 모두 선택

  • :nth-last-child(A)

    • 부모 요소의 자식 중 뒤에서 A번째인 요소 선택
    • p:nth-last-child(2): 뒤에서 두번째인 자식요소 p 선택

  • :first-of-type

    • 동일한 부모 요소 내에서 지정한 타입의 첫 번째 요소를 선택
    • p:first-of-type: 동일한 부모 요소 내 첫 번째 p 선택

  • :nth-of-type(A)

    • 동일한 부모 요소 내에서 해당 타입 중 A번째 요소 선택
    • li:nth-of-type(even): li 중 짝수 번째 요소 모두 선택
    • li:nth-of-type(odd): li 중 홀수 번째 요소 모두 선택

  • :nth-of-type(An+B)

    • 특정 요소를 정해진 패턴으로 선택
    • li:nth-of-type(2n+1): 부모 요소 내에서 모든 li 요소 중 홀수 번째 요소 선택( 1, 3, 5... )
    • li:nth-of-type(3n+2): 부모 요소 내에서 모든 li 요소 중 세 번째마다 시작하는 패턴을 선택( 2, 5, 8...)

  • :only-of-type

    • 부모 요소 내에서 특정 타입의 요소가 하나 뿐일 때 해당 요소를 선택
    • 같은 타입의 형제 요소가 없을 경우에 선택 !!
    • p:only-of-child: 해당 부모 요소에 p태그가 하나뿐일 때 선택

  • :last-of-child

    • 부모 요소 내에서 특정 타입의 요소중 마지막 요소 선택
    • p span:last-of-type: p태그 내 마지막 span태그 선택

  • :empty

    • 내부에 자식요소가 없는 요소를 선택
    • div:empty: 비어있는 div 선택

  • :not(X)

    • X에 해당하지 않는 요소 선택
    • :not(#fancy): id가 'fancy'가 아닌 모든 요소 선택
    • div:not(:first-child): 첫번째 자식이 아닌 모든 div 선택
    • :not(.big, .medium): class가 'big' 이나 'medium'이 아닌 요소 모두 선택

  • [attribute^='value']

    • ^: 캐럿 기호, 문자열의 시작을 의미
    • attribute 값이 'value'로 시작하는 모든 요소 선택

  • [attribute$="value"]

    • $: 문자열의 끝을 의미
    • attribute 값이 'value'로 끝나는 모든 요소 선택

  • X:visited, X:link

    • X:visited: 가상 클래스, 클릭했었거나 방문했던 페이지
    • X:link: 클릭 하기 . 전상태의 앵커 태그 전체 선택

  • X:checked