CSS / 선택자(Selector) / 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자

하위 선택자

하위 선택자(Descendant Selector)는 특정 요소의 하위에 있는 요소를 선택합니다. 예를 들어

div blockquote

1	div blockquote

는 div 요소의 하위에 있는 blockqoute 요소를 선택합니다. 이때 div와 blockquote 사이에 요소가 더 있어도 선택이 됩니다. 즉

<div>
  <blockquote>...</blockquote>
</div>

1

2

3

<div>

</div>

일 때도 blockquote를 선택하고,

<div>
  <aside>
    <blockquote>...</blockquote>
  </aside>
</div>

1

2

3

4

5

<div>

<aside>

</aside>

</div>

일 때도 blockquote를 선택합니다.

자식 선택자

자식 선택자(Child Selector)는 특정 요소의 자식 요소를 선택합니다. 예를 들어

div > blockquote

1	div > blockquote

는 div 요소의 자식 요소 중 blockqoute를 선택합니다. 주의할 점은 한단계 아래에 있는 요소만 선택한다는 것입니다. 즉

<div>
  <blockquote>...</blockquote>
</div>

1

2

3

<div>

</div>

일 때는 blockquote를 선택하지만

<div>
  <aside>
    <blockquote>...</blockquote>
  </aside>
</div>

1

2

3

4

5

<div>

<aside>

</aside>

</div>

일 때는 blockquote를 선택하지 않습니다.

형제 선택자

형제 선택자(Sibling Selector)는 어떤 요소의 형제 요소를 선택하는 선택자입니다. 예를 들어

h1 ~ p

1

h1 ~ p

는 h1 요소의 형제 요소 중 p 요소를 선택합니다.

인접 형제 선택자

인접 형제 선택자(Adjacent Sibling Selector)는 어떤 요소의 형제 요소 중 첫번째 요소를 선택합니다. 예를 들어

h1 + p

1

h1 + p

는 h1 요소의 형제 요소 중 첫번째 p 요소를 선택합니다.

CSS

CSS / 선택자

CODING FACTORY