css 동위선택자, 근접선택자에 대해 알아보자

퍼블리싱/css

css 동위선택자, 근접선택자에 대해 알아보자

xhakxh135 2024. 3. 8. 09:39

SMALL

동위 선택자(sibling selector)

동위 선택자는 동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 있는 특정 요소를 모두 선택한다.

(첨에 동위 선택자라 그래서 동일한 위치에 있는 요소들 인 줄 알았는데 해당 요소 뒤에 있는 애들이였음)

동위 관계란?

HTML 요소에 같은 부모(parent) 요소를 가지고 있는 요소들을 의미.

같은 동위 관계 있는 요소를 형제(sibling) 이라고 한다.

<body>
  <div>
    <h1>
    <p>
    <span>
  </div>
</body>

여기서 동위 요소는 div를 부모로 가지고 있는 h1, p, span 이라고 할 수 있다.

일반 동위 선택자

해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.

div 태그와 동위 관계에 있는 요소 중 div 태그보다 뒤에 존재하는 p 태그를 모두 선택하는 예제

<style>
  div ~ p {color:red;}
</style>

<body>
  <div>
    <p></p>
  </div>
  <p>내가 sibiling 이다!</p>
  <p>내가 sibiling 이다!</p>
</body>

인접 동위 선택자

인접 동위 선택자는 해당 요소와 동위 관계에 있으며, 해당 요소 바로 뒤에 존재하는 특정 타입 요소를 모두 선택한다.

<style>
  div + p {background:pink;}
</style>

<body>
  <div>
    <p>
      <div></div>
      <p>내가 sibiling 이다!</p>
    </p>
  </div>
  <p>내가 sibiling 이다!</p>
  <p></p>
</body>

결국 근접선택자나 동위선택자나 같은 동위 관계 있는 요소 기준으로 뒤에 있는 요소를 선택하는 것 인데,

뒤에 있는 모든 걸 선택할거냐 바로 뒤에 있는 것만 선택할거냐의 차이이다.

참고: https://www.tcpschool.com/css/css_selector_sibling

LIST