CSS의 형제 선택자

형제 선택자 ~는 동일한 부모 안에서 지정된 요소 이후에 위치한 모든 요소를 선택할 수 있게 합니다.

문법

css선택자1 ~ 선택자2 {
  
}

예시

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;
}

Результат:

함께 보기