23.03.09 / 복합 선택자

2. 복합 선택자

- 복합 선택자는 기본 선택자를 조합해서 사용한다.

[ 1. 일치 선택자 ]

• 두개의 선택자(태그, 클래스, 아이디 선택자)를 붙여서 사용하며, 동시에 만족하는 요소를 선택
• 태그 선택자와 클래스/아이디 선택자의 위치를 바꿔서 작성하면 찾을 수 없다. 태그 선택자를 먼저 작성하도록 한다.

 

---

<요소의 부모 자식 관계 / 하위 상위 요소>

<div>   (1번 div)
     <div></div>  (2번 div)
</div>
1번 div의 내용에 2번 div라는 요소가 들어가 있다.
밖에 있는 1번 div 요소를 "부모 요소"라고 하며, 내부에 있는 2번 div 요소를 "자식 요소" 라고 한다.

<div>  (1번 div)
     <div>  (2번 div)
           <div></div>  (3번 div)
     </div>
</div>
3번 입장에서 1번과 2번은 조상 요소(상위 요소)라고 부른다.
1번 입장에서 2번과 3번은 후손 요소(하위 요소)라고 부른다.

[ 2. 자식 선택자 ]

• 어떤 요소의 자식 요소를 선택한다. (자식 선택자에서는 후손은 불가능 / 기준 요소의 바로 안에 있는 요소만 가능)
• 기호 : > (앵글 브레킷, Angel Braket, 꺽쇠 괄호) (꺽쇠 앞 뒤로 스페이스바: 공백문자)
• ul > .peach {}   => ul 요소를 찾고 그 안의 클래스 선택자인 peach를 찾아 적용한다. (ul 뒤와 . 앞에 띄어쓰기 필수)

[ 3. 하위/후손 선택자 ]

• 어떤 요소의 하위 요소를 선택한다. (자식 선택자와 다르게 자식의 자식 요소 까지 선택 가능)
• 기호 : 스페이스바 ("공백 문자 / 띄어쓰기")
• 띄어 쓰기도 하나의 특수 기호다 = 공백 문자
• 선택자 사용 시, 띄어 쓰기를 함부로 사용하지 않는다.

[ 4. 일반 형제 선택자 ]

• 어떤 선택자의 다음 형제 요소 전부 선택한다.
• 기호 : ~ (틸드 Tilde)

[ 5. 인접 형제 선택자 ]

• 어떤 선택자의 다음 형제 요소 하나를 선택한다.
• 기호 : +