결합 선택자

    
      /* <div> 내에 있는 모든 <p>를 선택 */
      div p {
        color: blue;
      }
    
  

    
      <div>
        <p>이 문장은 파란색으로 표시돼.</p>
        <div>
          <p>이 문장도 파란색으로 표시돼, 왜냐하면 "div"의 후손이기 때문이지.</p>
        </div>
      </div>
      <p>이 문장은 파란색으로 표시되지 않아.</p>
    
  

    
      /* .container의 직접적인 자식인 <p>만 선택 */
      .container > p {
        color: green;
      }
    
  

    
      <div class="container">
        <p>이 문장은 녹색으로 표시돼.</p>
        <div class="wrapper">
          <p>이 문장은 녹색으로 표시되지 않아, 왜냐하면 .container의 직접적인 자식이 아니기 때문이야.</p>
        </div>
        <p>이 문장은 녹색으로 표시돼.</p>
      </div>
      <p>이 문장은 녹색으로 표시되지 않아.</p>
    
  

    
      /* <h1> 바로 다음에 오는 <p>를 선택 */
      h1 + p {
        color: red;
      }
    
  

    
      <h1>제목 1</h1>
      <p>이 문장은 빨간색으로 표시돼, 왜냐하면 "h1" 바로 뒤에 오기 때문이야.</p>
      <p>이 문장은 빨간색으로 표시되지 않아.</p>
    
  

    
      /* 동일한 중첩 레벨에서 <h1> 뒤에 오는 모든 <p>를 선택 */

      h1 ~ p {
        color: purple;
      }
    
  

    
      <h1>제목 1</h1>
      <p>이 문장은 보라색으로 표시돼.</p>
      <p>이 문장도 보라색으로 표시돼.</p>
      <div>
        <p>이 문장은 보라색으로 표시되지 않아, 왜냐하면 다른 중첩 레벨에 있기 때문이야.</p>
      </div>