Selectors (3) - 구조적 가상 클래스 선택자 (Structural Pseudo-classes) (:first-child, :last-child, :nth-child(n) )

이 포스트는 김버그님의 김버그의 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

 

 

 

 

📝 메모

---

 

 

Pseudo classes(가상 클래스)란?

:어떤 상태나 조건을 만족했을 때 적용되는 클래스

 

 

    <section>
      <h1>heading</h1>
      <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </section>

 

 

li:first-child

: li이자 first child인 element(즉, 가장 첫 li)

 

li:last-child

:li이자 last child인 element (즉, 가장 마지막 li)

 

 

li:nth-child(3)

:li들 중에서 3번째 li

 

 

추가)

li:nth-child(2n) 짝수번째 li들

li:nth-child(2n-1) 홀수번째 li들

 

 

 

 

이 pseudo class가 있으면 굳이 따로 element에

class="first-child", class="last-child" ...를 줄 필요 없다.

 

또 가령 중간에 li들이 추가되면 자동으로 마지막 li에 스타일이 적용된다.