CSS / 선택자(Selector) / 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자
하위 선택자
하위 선택자(Descendant Selector)는 특정 요소의 하위에 있는 요소를 선택합니다. 예를 들어
|
1 |
div blockquote |
는 div 요소의 하위에 있는 blockqoute 요소를 선택합니다. 이때 div와 blockquote 사이에 요소가 더 있어도 선택이 됩니다. 즉
|
1 2 3 |
<div> <blockquote>...</blockquote> </div> |
일 때도 blockquote를 선택하고,
|
1 2 3 4 5 |
<div> <aside> <blockquote>...</blockquote> </aside> </div> |
일 때도 blockquote를 선택합니다.
자식 선택자
자식 선택자(Child Selector)는 특정 요소의 자식 요소를 선택합니다. 예를 들어
|
1 |
div > blockquote |
는 div 요소의 자식 요소 중 blockqoute를 선택합니다. 주의할 점은 한단계 아래에 있는 요소만 선택한다는 것입니다. 즉
|
1 2 3 |
<div> <blockquote>...</blockquote> </div> |
일 때는 blockquote를 선택하지만
|
1 2 3 4 5 |
<div> <aside> <blockquote>...</blockquote> </aside> </div> |
일 때는 blockquote를 선택하지 않습니다.
형제 선택자
형제 선택자(Sibling Selector)는 어떤 요소의 형제 요소를 선택하는 선택자입니다. 예를 들어
|
1 |
h1 ~ p |
는 h1 요소의 형제 요소 중 p 요소를 선택합니다.
인접 형제 선택자
인접 형제 선택자(Adjacent Sibling Selector)는 어떤 요소의 형제 요소 중 첫번째 요소를 선택합니다. 예를 들어
|
1 |
h1 + p |
는 h1 요소의 형제 요소 중 첫번째 p 요소를 선택합니다.