최원종의 개발 블로그

CSS 선택자(결합 선택자) - 8 본문

HTML_CSS/사전학습

CSS 선택자(결합 선택자) - 8

chl6698 2026. 4. 16. 16:17

결합 선택자

결합 선택자는 CSS에서 여러 선택자를 조합해서 HTML 요소 간의 관계를 기반으로 더 구체적으로 대상을 선택하는 방법
기본 선택자(태그, 클래스, ID 등)만으로는 단순히 "무엇"을 선택할지 정할 뿐이지만,
결합 선택자는 "어떤 위치"나 "어떤 관계"에 있는 요소를 골라낼 수 있게 함

즉, 결합 선택자는 
두 개 이상의 선택자를 "기호"로 연결해서 사용함.
이 기호가 요소 간의 관계를 정의

예: div p 는 "<div> 안에 있는 <p>"라는 뜻이고,
div > p 는 "<div>의 직계 자식인 <p>"라는 뜻

결합 선택자의 종류 

자손 선택자 ( <공백> ): 부모 안의 모든 자손(자식, 손자 등)을 선택.
자식 선택자 ( > ): 부모의 직계 자식만 선택.
인접 형제 선택자 ( + ): 바로 다음에 오는 형제 하나만 선택.
일반 형제 선택자 ( ~ ): 뒤에 오는 모든 형제를 선택.

선택자 종류 정리

코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 결합 선택자 중간 기호가 공백  h1 태그에 모든 자손들(하위선택자) */
      h1 p {
        /* 현재 h1 태그에는 자손이 없음 */
        color: green;
      }

      /* 인접 형제 선택자 */
      h1 + p {
        color: aqua;
      }
      /* 뒤에 오는 선택된 태그의 형제 선택자 */
      h1 ~ p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>가나다라마바사</p>
    <h1>여기가 h1 태그야</h1>
    <p>가나다라마바사</p>
    <p>가나다라마바사</p>
    <p>가나다라마바사</p>
    <div>
      <p>12345678</p>
    </div>
  </body>
</html>

 

'HTML_CSS > 사전학습' 카테고리의 다른 글

CSS 선택자(속성 선택자) - 10  (0) 2026.04.17
CSS 선택자(가상 클래스 선택자) - 9  (0) 2026.04.16
CSS(Cascading Style Sheets) - 7  (0) 2026.04.16
시멘틱 태그란 - 6  (1) 2026.04.15
HTML 주요 body 내의 태그 - 5  (0) 2026.04.15
'HTML_CSS/사전학습' Related Articles more