[CSS] 복합 선택자(Combinators)에 대하여 (일치, 자식, 후손, 인접형제, 일반형제)

일치 선택자(Basic Combinator)

• A와 B를 동시에 만족하는 요소를 선택

See the Pen 일치 선택자 by wjdxo513 (@wjdxo513) on CodePen.

 

일치선택자는 두 가지 조건을 동시에 만족하는 요소에 적용됩니다. 위의 예제에서 li태그에서 green이라는 클래스명으로 지정된 요소들에만 CSS가 적용되는 것을 보실 수 있습니다.

 

 

자식 선택자(Child Combinator)

• A의 자식 요소 B를 선택
• 자식은 부모 바로 밑에 있는 요소
• ‘>'는 자식 선택자의 기호

See the Pen 자식 선택자 by wjdxo513 (@wjdxo513) on CodePen.

 

자식 선택자는 A > B의 형태로 설정되며 여기서 > 기호는 자식 선택자를 의미합니다. 위의 예제에서는 div의 자식에 CSS를 지정하였고 li의 경우 depth가 2이므로 자식에서 제외되어 적용이 되지 않지만 span의 경우 depth가 1이므로 자식으로 인식되어 CSS가 지정되는 것을 보실 수 있습니다.

 

 

후손(하위) 선택자(Descendant Combinator)

• A의 후손 요소 B를 선택
• 후손은 부모 하위에 있는 모든 요소
• ‘띄어쓰기'는 후손 선택자의 기호

See the Pen 후손 선택자 by wjdxo513 (@wjdxo513) on CodePen.

 

후손 선택자는 A. B의 형태로 설정되며 여기서 띄어쓰기는 후손 선택자임을 의미합니다. 위의 예제에서는 div의 후손에 CSS를 지정하였고 후손의 경우 depth를 따지지 않으므로 두 군데 모두 CSS가 지정되는 것을 보실 수 있습니다.

 

 

인접형제 선택자(Adjacent Sibling Combinator)

• A의 다음 형제 요소 B 하나만을 선택
• 형제는 부모가 같은 요소를 뜻함
• '+'는 인접형제 선택자의 기호

See the Pen 인접형제 선택자 by wjdxo513 (@wjdxo513) on CodePen.

 

인접형제 선택자는 A + B의 형태로 설정되며 여기서 +가 인접형제 선택자임을 의미하는 기호입니다. 위의 예제에서는 각각 li와 p태그의 바로 다음 형제에 CSS를 지정하였고 부모가 같은 바로 다음 형제 요소에만 CSS가 적용되는 것을 보실 수 있습니다.

 

 

일반형제 선택자(General Sibling Combinator)

• A의 다음 형제 요소 모두를 선택
• 형제는 부모가 같은 요소를 뜻함
• '~'는 일반형제 선택자의 기호

See the Pen 일반형제 선택자 by wjdxo513 (@wjdxo513) on CodePen.

 

일반형제 선택자는 A ~ B의 형태로 설정되며 여기서 ~가 일반형제 선택자임을 의미하는 기호입니다. 위의 예제에서는 각각 li와 p태그의 바로 다음 형제에 CSS를 지정하였고 부모가 같은 다음의 모든 형제 요소에 CSS가 적용되는 것을 보실 수 있습니다.