기본 선택자 결합

기본 선택자를 결합하여 특정 요소에 스타일을 적용할 수 있습니다. 예를 들어, 아이디(id)와 클래스(class) 선택자를 결합하여 특정 아이디 내의 클래스에 스타일을 지정할 수 있습니다.

#myId .myClass {
  color: red;
}

자식 선택자 결합

부모 요소와 자식 요소를 조합하여 특정 구조에 스타일을 적용할 수 있습니다. 예를 들어, div 요소의 자식인 p 요소에 스타일을 지정할 수 있습니다.

div > p {
  font-size: 16px;
}

인접 형제 선택자 결합

인접한 형제 요소간에 스타일을 적용하려면 인접 형제 선택자를 사용할 수 있습니다. 예를 들어, p 요소의 인접한 형제인 div 요소에 스타일을 적용할 수 있습니다.

p + div {
  margin-top: 20px;
}

조합된 선택자를 사용하여 효율적으로 웹 요소를 스타일링할 수 있습니다. 이를 통해 코드를 더 깔끔하게 유지하고 웹 페이지의 스타일링을 효율적으로 관리할 수 있습니다.