Selectors (2) - 자식, 자손, 형제 선택자(Child, Descendant, Sibling Combinators)

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

📝 메모

---

 

• Child Combinator, Descendant Combinator

자식 선택자 parent > child

자손 선택자 parent descendants (자손에는 당연히 직계 자식도 포함된다!)

    <section>
      <h1>heading 1</h1>
      <ul>
        <li>
          <h1>heading 2</h1>
          <p>yay</p>
        </li>
        <li>
          <h1>heading 3</h1>
          <p>yay</p>
        </li>
      </ul>
    </section>

 

section h1

:section아래 모든 heading인 heading1, heading2, heading3가 선택된다.

 

section > h1

: section의 직계 자식인 heading1만 선택 된다.

 

 

 

 

 

• Sibling combinators

+와 ~이 있다.

 

    <section>
        <h1>heading</h1>
        <ol>
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </section>

 

 

.active ~ li

active라는 클래스를 가진 li를 기준으로 그 다음에 오는 모든 형제 li를 선택해서 style을 주고 싶을 때

 

 

.active + li

: active 클래스 li 기준, 그 다음에 오는 형제 li 하나만 선택해서 style을 주고 싶을 때