[CSS] :first-child() :first-of-type 가상 클래스(의사 클래스)

:first-child

• 지정 요소가 형제 요소 중 제일 첫 요소인 경우
• 다른 말로 부모의 자식 요소 중 첫 번째 자식을 선택

CSS

.parents p:first-child {
  background-color: green;
  color: #fff;
}
.parents > p:first-child {
  text-decoration: underline;
  font-style: italic;
}

아래의 예시에서 부모는 .parents가 된다.

p:first-child

부모의 자식 요소(=형제 요소) 중 첫 번째 요소가 p(지정 요소)인 경우에 스타일을 적용한다.

HTML

<div class="parents">
  <p>1. 첫번째 p요소</p>
  <p>2. 두번째 p요소</p>
  <div>
    3. 첫번째 div 요소
    <p>3-1. div 내부의 첫번째 p요소</p>
  </div>
</div>

결과

1. 첫번째 p요소

2. 두번째 p요소

3. 첫번째 div 요소

3-1. div 내부의 첫번째 p요소

---

:first-of-type

• 지정 요소가 동일 타입의 형제 요소 중 제일 첫 요소인 경우
• 다른 말로 부모의 자식 요소 중 각 타입별로 첫번째로 노출되는 요소
• 선택자를 지정하지 않으면 전체 선택자(*)로 지정된다.

CSS

.parents p:first-of-type {
  background-color: green;
  color: #fff;
}
.parents > div :first-of-type {
  background-color: gray;
  color: #fff;
}

p:first-of-type

부모의 자식요소(=형제요소)중 p(지정 요소)의 동일 타입들 중에서 첫 번째 p요소만 선택

div :first-of-type

:first-of-type의 선택자를 지정하지 않는 경우 전체 선택자(*)로 반영되어 첫 번째로 오는 타입의 모든 요소가 선택된다.

HTML

<div class="parents">
  <p>1. 첫번째 p요소</p>
  <p>2. 두번째 p요소</p>
  <div>
    3. 첫번째 div 요소
    <div>3-1. div 내부의 div 중에서 첫번째 p요소</div>
    <p>3-1. div 내부의 p 중에서 첫번째 p요소</p>
  </div>
</div>

<div class="parents">
  <div>
    <div>4-1. div 내부의 첫번째 div 요소</div>
    <p>4-2. div 내부의 첫번째 p 요소</p>
    <div>4-3. div 내부의 첫번째 p 요소</div>
    <span>4-4. div 내부의 첫번째 p 요소</span>
    <p>4-5. div 내부의 첫번째 p 요소</p>
    <em>4-6. div 내부의 첫번째 p 요소</em>
  </div>
</div>

결과

1. 첫번째 p요소

2. 두번째 p요소

3. 첫번째 div 요소

3-1. div 내부의 div 중에서 첫번째 p요소

3-1. div 내부의 p 중에서 첫번째 p요소

4-1. div 내부의 첫번째 div 요소

4-2. div 내부의 첫번째 p 요소

4-3. div 내부의 첫번째 p 요소

4-4. div 내부의 첫번째 p 요소

4-5. div 내부의 첫번째 p 요소

4-6. div 내부의 첫번째 p 요소

 

first-child와는 반대로 마지막 요소를 선택하는 last-child도 있다.