선택자 더 알아보기

✏️ 추가 선택자

1️⃣ 속성 선택자 : 특성 속성을 명시하여 요소 선택

[속성명]

🔎 속성 선택자 기호와 사용하기

• *: 값의 포함 여부
• ^: 값의 시작 여부
• $: 값의 끝 여부

width 속성 중 값에 0이 포함된 요소만 선택

2️⃣ 하위 요소 선택자 : 상위 요소에 포함된 하위 요소 선택

'공백'

body 요소 하위의 p 요소 선택

3️⃣ 자식 요소 선택자 : 상위 요소의 바로 한 단계 하위 요소를 선택

'>'

body 요소 바로 한 단계 하위의 p 요소 선택
body 요소 두 단계 하위의 p 요소는 선택되지 않음

4️⃣ 인접 형제 선택자 : 형제 요소 중 첫번째 형제 요소를 선택

'+'

형제요소 : 동일한 직계 상위 요소를 공유하는 요소
id가 sam인 요소의 형제 요소 중 첫번째 p 요소 선택

5️⃣ 형제 요소 선택자 : 형제 요소를 선택

~

id가 sam인 요소의 형제 요소 중 모든 p 요소를 선택
❗️id가 sam인 요소의 형제 요소 중 앞에 있는 요소는 선택 불가, 뒤에 있는 형제 요소만 선택 가능함