CSS 선택자

선택자

• 일반 선택자

  • div button => 자손 선택자
  • div > button => 자식 선택자
  • div ~ button => 형제 선택자
  • div + button => 인접 선택자

• 속성 선택자

  • [속성이름]: 해당 속성을 가진 모든 요소를 선택
  • [속성이름='속성값']: 해당 속성값을 가진 모든 요소를 선택
  • [속성이름~='속성값']: 특정 단어를 포함하는 요소를 선택
  • [속성이름|='속성값']: 해당 문자열만 또는 특정 문자열로 시작하면서 하이픈(-)이 오는 요소를 선택
  • [속성이름^='속성값]: 해당 문자열로 시작하는 요소를 모두 선택
  • [속성이름$='속성값']: 해당 문자열로 끝나는 요소를 모두 선택
  • [속성이름*='속성값']: 해당 문자열을 포함하는 요소를 모두 선택

• 가상 클래스 선택자

  • 요소의 특정 상태를 선택할 수 있게 해주며 콜론(:)을 사용하여 표현
  • :link, :visited, :hover, :active, :focus

• 구조적 가상 클래스 선택자

  • :first-child, :last-child: 첫번째 요소, 마지막 요소 선택
  • :nth-child: 부모 요소 내의 모든 자식 요소 중 지정된 순서에 있는 요소를 선택
    • odd, even, an+b형태의 수식 사용 가능(n은 0부터 시작, a와 b는 정수)
  • :nth-of-type: 같은 타입의 형제 요소 중 지정된 순서에 있는 요소를 선택
  • :only-of-type: 형제 요소 중 유일하게 사용된 태그를 선택
  • :not: 특정 선택자를 제외한 요소를 선택

• 가상 요소

  • 말 그대로 가상의 요소를 만드는 것.
    선택한 요소의 특정 부분에 스타일을 적용할 수 있게 해주며 이중 콜론(::)을 사용하여 표현
  • ::before, ::after, ::placeholder

• 구조적 가상 클래스 선택자 고급

  • :root
    • 문서 트리의 루트 요소를 선택한다.
    • 전역 CSS 변수를 선언할 때 주로 사용된다.
    • CSS 변수는 --로 시작하는 이름을 가지며, var() 함수를 사용하여 값을 참조할 수 있다.
    • 테마 전환시 유용하다.
  • :is()와 :where()
    • 여러 개의 선택자를 한꺼번에 지정할 수 있는 간편한 방법을 제공한다.
    • :where()는 :is()와 유사하지만 우선순위가 낮다.
  • :has()
    • 특정 요소가 자식 요소를 포함하고 있는지를 검사할 수 있다.