CSS 선택자 (복합선택자)

복합 선택자 : 복합 선택자는 크게 세 가지 종류가 있다.

• E F (하위 선택자)
• E > F (자식 선택자)
• E + F (인접 선택자)
• E ~ F (Tilde, 물결 선택자)

E F (하위 선택자)

E 엘리먼트의 하위에 있는 F 엘리먼트들을 선택한다. 보통 ID Selector와 함께 사용하여 중복 선언을 피하고자 할때 많이 사용한다.
또한 불필요하게 class를 많이 적어주지 않아도 많은 하위 엘리먼트를 한번에 선택 할 수 있기 때문에 유용하고 많이 사용한다.

See the Pen css -pseudo by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

E > F (자식 선택자)

E 엘리먼트의 자식 엘리먼트인 F 엘리먼트를 선택한다.
descendant selector의 경우 하위에 있는 모든 F 엘리먼트를 선택하는데 비해 child selector는 바로 하위에 있는 F 엘리먼트만을 선택한다.

See the Pen 복합선택자 > 하위선택자 by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

E + F (인접 선택자)

인접한 엘리먼트를 선택한다.

See the Pen 복합선택자 > 자식선택자 by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

E ~ F (물결 선택자)

인접선택자(+)는 중간에 다른 엘리먼트가 들어갈 수 없지만 물결선택자(~)는 중간에 다른 것이 들어 갈 수 있습니다.

See the Pen 복합선택자 > 인접선택자 by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.