CSS 결합자 종류와 사용법 (Descendant, Child, Sibling Combinators)

CSS 결합자 정리

 

CSS 결합자란

CSS 결합자(combinator)는 여러 선택자를 결합하여 특정한 관계에 있는 요소들을 선택하는 데 사용됩니다. 결합자는 요소들 간의 관계를 정의하여 더욱 정밀하고 복잡한 스타일링을 가능하게 합니다. 주요 결합자와 그 사용 방법은 다음과 같습니다.

 

자손 선택자 (Descendant Selector)

특정 요소의 모든 자손 요소를 선택합니다. 공백을 사용합니다.

A B {
    /* 스타일 규칙 */
}

 

예제: div p는 모든 div 요소 내의 모든 p 요소를 선택합니다.

div p {
    color: blue;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.

 

 

자식 선택자 (Child Selector)

자식 결합자는 > 기호를 사용하여 정의되며, 첫 번째 요소의 직계 자식인 모든 요소를 선택합니다

A > B {
    /* 스타일 규칙 */
}

 

예제: div > p는 모든 div 요소의 직계 자식인 모든 p 요소를 선택합니다.

div > p {
    color: red;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.

 

 

형제 선택자 (Adjacent Sibling Selector)

인접 형제 결합자는 + 기호를 사용하여 정의되며, 첫 번째 요소의 바로 다음에 오는 형제 요소를 선택합니다.

A + B {
    /* 스타일 규칙 */
}

 

예제: h1 + p는 h1 요소 바로 다음에 오는 p 요소를 선택합니다.

h1 + p {
    font-style: italic;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.

 

 

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

일반 형제 결합자는 ~ 기호를 사용하여 정의되며, 첫 번째 요소의 모든 형제 요소를 선택합니다.

A ~ B {
    /* 스타일 규칙 */
}

 

예제: h1 ~ p는 h1 요소 이후에 나오는 모든 형제 p 요소를 선택합니다.

h1 ~ p {
    color: green;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.

 

 

예제 코드

위에서 배운 결합자들을 모두 사용한 예제 코드를 확인 해보겠습니다.

/* 자손 결합자: 모든 div 내의 모든 p 요소 */
div p {
    color: blue;
}

/* 자식 결합자: 모든 div의 직계 자식인 p 요소 */
div > p {
    color: red;
}

/* 인접 형제 결합자: h1 바로 다음에 오는 p 요소 */
h1 + p {
    font-style: italic;
}

/* 일반 형제 결합자: h1 이후에 나오는 모든 p 요소 */
h1 ~ p {
    color: green;
}

See the Pen Untitled by 김성리 (@mkinljed-the-typescripter) on CodePen.