---
description: 계층셀렉터 / 속성셀렉터
---

# Selecter

### 계층셀렉터

$(‘div#lectures li’) \
$(‘div > p’) $(‘#first + li’) \
$(‘#second \~ li’)

| 셀렉터                 | 기능                                    |
| ------------------- | ------------------------------------- |
| ancestor descendant | ancestor 요소의 모든 자손 요소 descendant 를 선택 |
| parent > child      | parent 요소 자식 요소를 선택                   |
| prev + next         | prev 요소 다음의 형제 요소 next를 선택            |
| prev \~ siblings    | prev 요소 다음의 형제 요소들 siblings를 선        |

### 속성셀렉터

$(‘div#lectures li\[href=’#lec03’]’) \
$(‘div#reference li\[href^=’[http://’\]’’](http://xn--evg/]%E2%80%99%E2%80%99)) \
$(‘\[src]\[alt]’)

| 셀렉터                                   | 기능                            |
| ------------------------------------- | ----------------------------- |
| \[attr]                               | attr 속성을 가지는 요소를 선택           |
| \[attr=value]                         | attr 속성 값이 value인 요소를 선택      |
| \[attr!=value]                        | attr 속성 값이 value가 아닌 요소를 선택   |
| \[attr^=value]                        | attr 속성 값이 value로 시작하는 요소를 선택 |
| \[attr$=value]                        | attr 속성 값이 value로 끝나는 요소를 선택  |
| \[attr\*=value]                       | attr 속성 값에 value를 포함하는 요소를 선택 |
| \[selector1]\[selector2] \[selector3] | 셀렉터에 일치하는 속성을 가지고 있는 요 소를 선택  |
