CSS - 선택자 (selector)

크리스·2023년 1월 5일
0
post-thumbnail

기본적인 선택자에서 태그,클래스,아이디 선택자는 다루지 않겠습니다.

속성 선택자

주어진 속성의 존재 여부나 그 값에 따라 요소를 선택 합니다.

  • 태그[속성] { }
    👉 태그가 같고 안에 같은 속성이 존재하는 모든 요소를 선택하는 선택자 입니다. 예를 들어 div 태그 안에 class 속성을 가진 모든 태그를 선택한다면
    div[class] { } div 태그 중 class 속성을 가진 모든 태그들을 선택하게 됩니다.
  • 태그[속성=값] { }
    👉 태그가 같고 안에 같은 속성이 존재하며 값까지 같은 모든 요소를 선택하는 선택자 입니다.
  • [속성] { }
    👉 속성을 가진 모든 태그들을 선택 합니다.
  • [속성=값] { }
    👉 속성과 값을 가진 모든 태그들을 선택 합니다.
  • [속성 *= "값"] {}
    👉 속성 값에 "값"이 포함되는 태그들을 선택 합니다.
  • [속성 ^= "값"] {}
    👉 속성 값에 "값"으로 시작하는 태그를 선택 합니다.
  • [속성 $= "값"] {}
    👉 속성 값이 "값"으로 끝나는 태그들을 선택 합니다.

자손 결합자

  • A B { }
    👉 A 선택자의 하위에 있는 B선택자를 모두 선택한다.

자식 결합자

  • A > B { }
    👉 A 선택자의 바로 아래 자손 태그 중에 B선택자를 모두 선택합니다.

일반 형제 결합자

  • A ~ B { }
    👉 같은 부모를 공유하는 형제 태그들 중에서 A 선택자 아래에 B 선택자 모두를 선택 합니다.

인접 형제 결합자

  • A + B { }
    👉 같은 부모를 공유하는 형제 태그들 중에서 A 선택자 아래에 인접하는 B 선택자만 선택 합니다.
profile
재밌는건 다 합니다.

0개의 댓글