CSS 결합(Combinators) 선택자 – 자손, 자식, 형제 결합자

결합 선택자는 둘 이상의 선택자를 결합해서 스타일을 적용할 수 있습니다. 스타일을 적용하기 위해서 태그에 class 또는 id를 부여하는데 스타일을 적용할 때마다 매번 부여하는 것은 비효율적입니다. 이름을 지정하는 것도 힘들고 모두 기억하는 것도 힘듭니다. 그럴 경우에 결합 선택자를 사용하시면 됩니다.

그럼 결합 선택자의 종류 및 사용하는 방법에 대해서 알아보죠.

목차 (결합 선택자 종류)


mdn web docs 내용 참조

1. 자손 결합자 (Descendant combinator)

☞ 첫 번째 요소의 자손인 노드를 선택합니다.


1. [구문] : 부모요소 자손요소 { 스타일 정의 }

2. 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>자손 선택자</title>
<style>
article {
     width: 300px;
     border: 1px solid #000;
     padding: 20px;
}
article p {
     color: blueviolet;
}
</style>
</head>
<body>
     <article>
          <h2>CSS 배경 이미지 넣는 방법</h2>
          <p>웹 페이지 전체에 배경 이미지를 지정할 수 있습니다.</p>
          <div>
               <p>1. background-image 속성</p>
               <p>2. background-repeat 속성</p>
               <p>3. background-position 속성</p>
          </div>
     </article> 
</body>
</html>


3. 실행 결과 화면

▼ article 태그 안에 포함된 모든 p 요소를 blueviolet 색으로 지정합니다.

자손 결합자 사용 예제 실행 결과 화면입니다.

2. 자식 결합자 (Child combinator)

☞ 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.


1. [구문] : 부모요소 > 자식요소 { 스타일 정의 }

2. 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>자식 선택자</title>
<style>
article {
     width: 300px;
     border: 1px solid #000;
     padding: 20px;
}
article > p {
     color: blueviolet;
}
</style>
</head>
<body>
     <article>
          <h2>CSS 배경 이미지 넣는 방법</h2>
          <p>웹 페이지 전체에 배경 이미지를 지정할 수 있습니다.</p>
          <div>
               <p>1. background-image 속성</p>
               <p>2. background-repeat 속성</p>
               <p>3. background-position 속성</p>
          </div>
     </article> 
</body>
</html>


3. 실행 결과 화면

▼ article 태그 안에 포함된 자식 p 요소만 blueviolet 색으로 지정합니다.

자식 결합자 사용 예제 실행 결과 화면입니다.

3. 인접 형제 결합자 (Adjacent sibling combinator)

☞ 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.


1. [구문] : 요소 1 + 요소 2

2. 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>인접 형제 결합자</title>
<style>
article {
     width: 300px;
     border: 1px solid #000;
     padding: 20px;
}
h2 + p {   /* h2 요소의 형제 요소 중에서 첫번째 형제인 p 요소에 적용*/
     color: blueviolet;
}
</style>
</head>
<body>
     <article>
          <h2>CSS 배경 이미지 넣는 방법</h2>
          <p>웹 페이지 전체에 배경 이미지를 지정할 수 있습니다.</p>
          <p>태그 요소에서도 배경 이미지를 지정할 수 있습니다.</p>
          <p>그리고 배경 이미지와 관련된 속성은 많이 있습니다.</p>
     </article> 
</body>
</html>


3. 실행 결과 화면

▼ h2 요소의 형제 요소 중에서 바로 뒤에 위치한 p 요소에 blueviolet 색을 지정합니다.

인접 형제 결합자 사용 예제 실행 결과 화면입니다.

4. 일반 형제 결합자 (General sibling combinator)

☞ 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.


1. [구문] : 요소 1 ~ 요소 2

2. 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>일반 형제 결합자</title>
<style>
article {
     width: 300px;
     border: 1px solid #000;
     padding: 20px;
}
h2 ~ p {   /* h2 요소의 형제인 p 요소에 모두 적용*/
     color: blueviolet;
}
</style>
</head>
<body>
     <article>
          <h2>CSS 배경 이미지 넣는 방법</h2>
          <p>웹 페이지 전체에 배경 이미지를 지정할 수 있습니다.</p>
          <p>태그 요소에서도 배경 이미지를 지정할 수 있습니다.</p>
          <p>그리고 배경 이미지와 관련된 속성은 많이 있습니다.</p>
     </article> 
</body>
</html>


3. 실행 결과 화면

▼ h2 요소의 형제인 p 요소에 모두 blueviolet 색을 지정합니다.

일반 형제 결합자 사용 예제 실행 결과 화면입니다.

CSS 관련 이전 게시글

  1. CSS 스타일과 스타일시트 적용 방법 그리고 티스토리
  2. CSS 선택자 유형 – 전체, 태그, 클래스, ID, 그룹
  3. CSS 스타일 적용 순서(우선순위) – !important
  4. CSS 글꼴(폰트) 관련 스타일, font-family 속성 등
  5. CSS 웹 폰트 사용하기 – @font-face
  6. CSS 구글 웹 폰트 사용하기, 티스토리 적용 방법
  7. [CSS] 눈누 웹 폰트 사용하기, 티스토리 적용 방법
  8. [CSS] 색상 지정하기(6가지 방법), 티스토리 글자색 지정
  9. [CSS] 텍스트 정렬(text-align), 줄 간격 조절(line-height)
  10. [CSS] a태그 링크 밑줄 없애기, 밑줄 스타일, 색상 변경
  11. [CSS] 목록 리스트 스타일 정리 및 예제, list-style 속성
  12. [CSS] 표(table) 스타일 정리 및 예제, border 속성 등
  13. [CSS] 배경색(background-color) 및 범위 지정 방법
  14. [CSS] 배경 이미지 넣는 방법, background-image 속성 등
위로 스크롤