선택자의 마지막 장에서는 여러 선택자를 조합해 더 유용한 선택을 하기 위한 방법, 결합자다중 선택자을 알아보겠습니다.

결합자와 선택자 그룹

한 번에 선택자 하나로도 유용하지만 일부 상황에선 효율적이지 않습니다. CSS 선택자를 결합해 더 세부적인 조정을 하면 훨씬 유용한 결과를 얻을 수 있습니다. CSS는 서로의 관계를 사용해 요소를 선택하는 몇 가지 방법을 제공하고, 아래 표는 그 목록과 설명입니다. (A와 B는 이전에 살펴본 아무 선택자나 가능합니다)

이름 구문 선택하는 요소
선택자 그룹 A, B A 혹은 B, 아니면 둘 다 만족하는 요소. (see 하나의 규칙, 여럿의 선택자를 참고하세요. 선택자 그룹은 결합자로 부르지 않습니다)
하위 선택자 A B A를 만족하는 요소의 자손 중 B를 만족하는 요소. 자손이란 자식, 자식의 자식, 자식의 자식의 자식... 등을 말합니다.
자식 선택자 A > B A를 만족하는 요소의 자식 중 B를 만족하는 요소.
인접 형제 선택자 A + B A를 만족하는 요소의 바로 옆 형제면서 B를 만족하는 요소. 즉 같은 부모의 A 바로 다음 자식입니다.
일반 형제 선택자 A ~ B A를 만족하는 요소의 다음 형제 중 B를 만족하는 요소. 즉 같은 부모의 A 다음 자식 중 일부분입니다.

결합자 예제

어떻게 되나 예제로 확인해보겠습니다.

<table lang="ko" class="with-currency">
  <thead>
    <tr>
      <th scope="col">제품</th>
      <th scope="col">수량</th>
      <th scope="col">가격</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">총합:</th>
      <td>154000</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>정원 의자</td>
      <td>1</td>
      <td>140000</td>
    </tr>
    <tr>
      <td>마시멜로 바</td>
      <td>2</td>
      <td>1500</td>
    </tr>
    <tr>
      <td>책</td>
      <td>1</td>
      <td>11000</td>
    </tr>
  </tbody>
</table>

스타일시트는 다음과 같습니다.

/* 기본 표 설정 */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* <table> 안의 <td>, <table> 안의 <th>
   쉼표는 결합자가 아니고, 같은 CSS 규칙 세트를
   여러 선택자에 적용하고 싶을 때 사용합니다. */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* <table> 안의 <thead> 안의 <th> */
table thead th {
  color: white;
  background: black;
}

/* <table> 안의 <tbody> 내부 <td> 중,
   자기 앞에 다른 <td>가 있는 경우 */
table tbody td + td {
  text-align: center;
}

/* <table> 안의 <tbody> 안의 <td> 중, 막내 자식 */
table tbody td:last-child {
  text-align: right
}

/* <table> 안의 <tfoot> 안의 <th> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* <table> 안의 <td> 중, <th> 바로 옆에 있는 경우 */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* "with-currency" 클래스와 함께 "lang" 속성의 값이 "ko"인 요소 속의
   <td> 중 막내 자식의 "after" 의사 요소 */
.with-currency[lang="ko"] td:last-child::after {
  content: '원';
}

/* "with-currency" 클래스와 함께 "lang" 속성의 값이 "en-US"인 요소 속의
   <td> 중 막내 자식의 "before" 의사 요소 */
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';
}

결과로는 이렇게 꽤 괜찮은 표가 나옵니다.

실습: 나만의 결합자

위의 예제는 결합자로 달성할 수 있는 복잡함을 시연하기 위함이었습니다. 이번 실습에서는 결합자를 사용해 간단한 선택자를 작성해야 합니다. 답을 내려면 2~4번 규칙에 선택자를 추가해야 합니다.

  1. 비정렬 리스트에 들어 있는 링크를 꾸미세요.
  2. 비정렬 리스트에 들어 있는 링크에 마우스를 가져다 댄 경우를 꾸미세요.
  3. 제일 큰 제목 바로 다음의 문단을 꾸미세요.

잘못 입력한 경우 초기화 버튼을 사용하여 언제든지 처음으로 돌아갈 수 있습니다. 정말 막혔다면 답안 보기 버튼을 사용해 가능한 답안 중 한 가지를 확인하세요.

하나의 규칙, 여럿의 선택자

이미 여러 번 보셨겠지만 확실히 짚고 가겠습니다. 선택자 여러 개를 쉼표로 구분해서 같은 규칙을 여러가지 요소에 적용할 수 있습니다. 이렇게요.

p, li {
  font-size: 1.6em;
}

아니면 이렇게도요.

 h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

다음으로

축하합니다! 선택자를 배우기 위한 길었던 여정이 끝났습니다. 제일 숙련된 웹 개발자라도 선택자가 할 수 있는 일에 놀라곤 한답니다. 모든 선택지를 다 기억해낼 수 없어도, 걱정 마세요. 선택자 시작 페이지를 즐겨찾기에 추가하고 필요할 때 다시 오셔서 찾아보세요.

다음 장에선 CSS에서 엄청 중요한 또 다른 주제, 바로 속성에 부여하는 값을 다룹니다. 길이, 색, 기타 다른 값을 나타내려면 어떤 단위를 써야 하는지 알아보겠습니다. CSS 값과 단위에서 뵙겠습니다.

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656
최종 변경자: urty5656,