CSS의 형제 선택자

형제 선택자 ~를 사용하면 지정된 요소 뒤에 있는 동일한 부모 내의 모든 요소를 선택할 수 있습니다.

예시

h2 태그 뒤에 있는 모든 p 태그를 선택하여 빨간색으로 칠해 봅시다:

html<div>
  <h2>text</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<p>
  -
</p>

cssh2 ~ p {
  color: red;
}

Результат:

예시

.test 클래스를 가진 요소 뒤에 있는 모든 p 태그를 선택하여 빨간색으로 칠해 봅시다:

html<div>
  <p class="test">
    text
  </p>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<p>
  ---
</p>

css.test ~ p {
  color: red;
}

Результат:

예시

.test 클래스를 가진 요소 뒤에 있는 .elem 클래스를 가진 모든 요소를 선택하여 빨간색으로 칠해 봅시다:

html<div>
  <p class="test">
    text
  </p>
  <p class="elem">
    +++
  </p>
  <p>
    ---
  </p>
  <p class="elem">
    +++
  </p>
</div>
<p>
  ---
</p>

css.test ~ .elem {
  color: red;
}

Результат:

실습 문제

html<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li id="elem">5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>