기본적인 선택자에서 태그,클래스,아이디 선택자는 다루지 않겠습니다.
속성 선택자
주어진 속성의 존재 여부나 그 값에 따라 요소를 선택 합니다.
- 태그[속성] { }
👉 태그가 같고 안에 같은 속성이 존재하는 모든 요소를 선택하는 선택자 입니다. 예를 들어 div 태그 안에 class 속성을 가진 모든 태그를 선택한다면
div[class] { } div 태그 중 class 속성을 가진 모든 태그들을 선택하게 됩니다.
- 태그[속성=값] { }
👉 태그가 같고 안에 같은 속성이 존재하며 값까지 같은 모든 요소를 선택하는 선택자 입니다.
- [속성] { }
👉 속성을 가진 모든 태그들을 선택 합니다.
- [속성=값] { }
👉 속성과 값을 가진 모든 태그들을 선택 합니다.
- [속성 *= "값"] {}
👉 속성 값에 "값"이 포함되는 태그들을 선택 합니다.
- [속성 ^= "값"] {}
👉 속성 값에 "값"으로 시작하는 태그를 선택 합니다.
- [속성 $= "값"] {}
👉 속성 값이 "값"으로 끝나는 태그들을 선택 합니다.
자손 결합자
- A B { }
👉 A 선택자의 하위에 있는 B선택자를 모두 선택한다.
자식 결합자
- A > B { }
👉 A 선택자의 바로 아래 자손 태그 중에 B선택자를 모두 선택합니다.
일반 형제 결합자
- A ~ B { }
👉 같은 부모를 공유하는 형제 태그들 중에서 A 선택자 아래에 B 선택자 모두를 선택 합니다.
인접 형제 결합자
- A + B { }
👉 같은 부모를 공유하는 형제 태그들 중에서 A 선택자 아래에 인접하는 B 선택자만 선택 합니다.