1. 구조 의사 클래스(structural pseudo-class)

---

• 구조 의사 클래스를 사용하면 HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택할 수 있다.

1) :first-child

• first-child는 모든 자식 요소 중에서 제일 앞에 위치하는 자식 요소를 모두 선택한다.

기본 문법

p:first-child {
    /* 속성 */
}

<div class="first">
  <p>이 p 태그는 div 태그의 첫 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 child 입니다!</p>
  <p>이 p 태그는 div 태그의 child 입니다!</p>
  <div class="second">
    <p>이 p 태그는 div 태그의 첫 번째 child 입니다!</p>
    <p>이 p 태그는 div 태그의 child 입니다!</p>
    <p>이 p 태그는 div 태그의 child 입니다!</p>
  </div>
</div>

div.first {
    border: 3px solid #008000;
}

div.second {
    border: 3px solid #FFD700;
}

p:first-child {
    color: red;
    font-weight: bold;
}

2) :last-child

• last-child는 모든 자식(child) 요소 중에서 제일 마지막에 위치하는 자식(child) 요소를 모두 선택한다.

기본 문법

p:last-child {
    /* 속성 */
}

<div class="first">
  <div class="second">
    <p>이 p 태그는 div 태그의 첫 번째 child 입니다!</p>
    <p>이 p 태그는 div 태그의 child 입니다!</p>
    <p>이 p 태그는 div 태그의 마지막 child 입니다!</p>
  </div>
  <p>이 p 태그는 div 태그의 child 입니다!</p>
  <p>이 p 태그는 div 태그의 child 입니다!</p>
  <p>이 p 태그는 div 태그의 마지막 child 입니다!</p>
</div>

div.first {
    border: 3px solid #008000;
}

div.second {
    border: 3px solid #FFD700;
}

p:last-child {
    color: red;
    font-weight: bold;
}

3) :nth-child

• nth-child는 모든 자식 요소 중에서 앞에서부터 n번째에 위치하는 자식 요소를 선택한다.

기본 문법

/* n번째 자식 요소 선택 */
p:nth-child(n) {
    /* 속성 */
}
/* 짝수 번째 자식 요소 선택 */
p:nth-child(2n) {
    /* 속성 */
}
/* 홀수 번째 자식 요소 선택 */
p:nth-child(2n+1) {
    /* 속성 */
}

<div>
  <p>이 p 태그는 div 태그의 첫 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 두 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 세 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 네 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 다섯 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 여섯 번째 child 입니다!</p>
</div>

div {
    border: 3px solid #008000;
}

p:nth-child(2n) {
    color: red;
    font-weight: bold;
}

4) :nth-last-child

• nth-last-child는 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택한다.

기본 문법

/* 뒤에서 n번째 자식 요소 선택 */
p:nth-last-child(n) {
    /* 속성 */
}
/* 뒤에서 짝수 번째 자식 요소 선택 */
p:nth-last-child(2n) {
    /* 속성 */
}
/* 뒤에서 홀수 번째 자식 요소 선택 */
p:nth-last-child(2n+1) {
    /* 속성 */
}

<div>
  <p>이 p 태그는 div 태그의 뒤에서 여섯 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 뒤에서 다섯 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 뒤에서 네 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 뒤에서 세 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 뒤에서 두번 번째 child 입니다!</p>
  <p>이 p 태그는 div 태그의 뒤에서 첫 번째 child 입니다!</p>
</div>

div {
    border: 3px solid #008000;
}

p:nth-last-child(3n) {
    color: red;
    font-weight: bold;
}

5) :first-of-type

• first-of-type는 모든 자식(child) 요소 중에서 제일 처음으로 등장하는 특정 타입의 요소를 모두 선택한다.

기본 문법

p:first-of-type {
    /* 속성 */
}

<div class="first">
  <p>이 p 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 p 태그입니다!</p>
  <p>이 p 태그는 div 태그의 child 입니다!</p>
  <p>이 p 태그는 div 태그의 child 입니다!</p>
  <div class="second">
    <p>이 p 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 p 태그입니다!</p>
    <p>이 p 태그는 div 태그의 child 입니다!</p>
    <p>이 p 태그는 div 태그의 child 입니다!</p>
  </div>
</div>

div.first {
    border: 3px solid #008000;
}

div.second {
    border: 3px solid #FFD700;
}

p:first-of-type {
    color: red;
    font-weight: bold;
}

6) :last-of-type

• last-of-type는 모든 자식(child) 요소 중에서 제일 마지막으로 등장하는 특정 타입의 요소를 모두 선택한다.

기본 문법

p:last-of-type {
    /* 속성 */
}

<div class="first">
  <p>이 p 태그는 div 태그의 child 입니다!</p>
  <p>이 p 태그는 div 태그의 child 입니다!</p>
  <p>이 p 태그는 div 태그의 child 요소 중에서 마지막으로 등장하는 p 태그입니다!</p>
  <div class="second">
    <p>이 p 태그는 div 태그의 child 입니다!</p>
    <p>이 p 태그는 div 태그의 child 입니다!</p>
    <p>이 p 태그는 div 태그의 child 요소 중에서 마지막으로 등장하는 p 태그입니다!</p>
  </div>
</div>

div.first {
    border: 3px solid #008000;
}

div.second {
    border: 3px solid #FFD700;
}

p:last-of-type {
    color: red;
    font-weight: bold;
}

7) :nth-of-type

• nth-of-type는 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택한다.

기본 문법

/* n번째 자식 요소 선택 */
p:nth-of-type(n) {
    /* 속성 */
}
/* 짝수 번째 자식 요소 선택 */
p:nth-of-type(2n) {
    /* 속성 */
}
/* 홀수 번째 자식 요소 선택 */
p:nth-of-type(2n+1) {
    /* 속성 */
}

<div class="first">
  <p>이 p 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 p 태그입니다!</p>
  <div>이 div 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 div 태그입니다!</div>
  <p>이 p 태그는 div 태그의 child 요소 중에서 두 번째로 등장하는 p 태그입니다!</p>
  <div>이 div 태그는 div 태그의 child 요소 중에서 두 번째로 등장하는 div 태그입니다!</div>
  <p>이 p 태그는 div 태그의 child 요소 중에서 세 번째로 등장하는 p 태그입니다!</p>
  <div>이 div 태그는 div 태그의 child 요소 중에서 세 번째로 등장하는 div 태그입니다!</div>
  <p>이 p 태그는 div 태그의 child 요소 중에서 네 번째로 등장하는 p 태그입니다!</p>
  <div>이 div 태그는 div 태그의 child 요소 중에서 네 번째로 등장하는 div 태그입니다!</div>
</div>

div.first {
    border: 3px solid #008000;
}

div.second {
    border: 3px solid #FFD700;
}

p:nth-of-type(2n) {
    color: red;
    font-weight: bold;
}

8) :nth-last-of-type

• nth-last-of-type는 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택한다.

기본 문법

/* 뒤에서 n번째 자식 요소 선택 */
p:nth-last-of-type(n) {
    /* 속성 */
}
/* 뒤에서 짝수 번째 자식 요소 선택 */
p:nth-last-of-type(2n) {
    /* 속성 */
}
/* 뒤에서 홀수 번째 자식 요소 선택 */
p:nth-last-of-type(2n+1) {
    /* 속성 */
}

<div class="first">
  <div>이 div 태그는 div 태그의 child 요소 중에서 뒤에서 네 번째로 등장하는 div 태그입니다!</div>
  <p>이 p 태그는 div 태그의 child 요소 중에서 뒤에서 네 번째로 등장하는 p 태그입니다!</p>
  <div>이 div 태그는 div 태그의 child 요소 중에서 뒤에서 세 번째로 등장하는 div 태그입니다!</div>
  <p>이 p 태그는 div 태그의 child 요소 중에서 뒤에서 세 번째로 등장하는 p 태그입니다!</p>
  <div>이 div 태그는 div 태그의 child 요소 중에서 뒤에서 두 번째로 등장하는 div 태그입니다!</div>
  <p>이 p 태그는 div 태그의 child 요소 중에서 뒤에서 두 번째로 등장하는 p 태그입니다!</p>
  <div>이 div 태그는 div 태그의 child 요소 중에서 뒤에서 첫 번째로 등장하는 div 태그입니다!</div>
  <p>이 p 태그는 div 태그의 child 요소 중에서 뒤에서 첫 번째로 등장하는 p 태그입니다!</p>
</div>

div.first {
    border: 3px solid #008000;
}

p:nth-last-of-type(2n+1) {
    color: red;
    font-weight: bold;
}