🌟 first-child / first-of-type 속성 차이점

first-child 와 first-of-type 차이점

first-child 와 first-of-type은 똑같이 자식 형제 요소 고르는것같은데 무엇이 다를까? 한방에 이해하기 쉽게 간단명료하게 설명하면 이렇다. 

 

div > p:first-child

• 'div 하위의 p 요소 중 첫번째 요소' 로 읽는 게 아니라 'div 하위의 첫번째 자식인 요소가 p 요소' 이면이다.
• 즉, div의 자손 요소중에 first-child를 고르는데 그게 p이면 스타일을 적용한다.
• 만일 p가 없다면 스타일을 적용하지 않는다.
• 'div first-child is p' 라고 영어 문장으로 이해하면 된다.

.parent > span:first-child {
	background: lightgreen;
}

.parent2 > p:first-child {
	background: lightgreen;
}

<div class="parent">
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <p class="box box1">p</p>
    <p class="box box1">p</p>
</div>

<div class="parent2">
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <p class="box box1">p</p>
    <p class="box box1">p</p>
</div>

See the Pen first-child by barzz12 (@inpaSkyrim) on CodePen.

 

div > p:first-of-type

• 마찬가지로 'div 하위의 p 요소 중(OF) 첫번째 요소' 라고 읽으면 바로 이해가 될 것이다.
• 즉, div의 자손요소중에 p태그를 모두 고르고 그중에 first-of-type만 스타일을 적용한다.
• 'div p first-of-type' 라고 영어 문장으로 이해하면 된다.

.parent > span:first-of-type {
	background: lightgreen;
}

.parent2 > p:first-of-type {
	background: lightgreen;
}

<div class="parent">
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <p class="box box1">p</p>
    <p class="box box1">p</p>
</div>

<div class="parent2">
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <span class="box box1">span</span>
    <p class="box box1">p</p>
    <p class="box box1">p</p>
    <p class="box box1">p</p>
</div>

See the Pen first-of-type by barzz12 (@inpaSkyrim) on CodePen.

---

last-child 와 last-of-type 차이점

last-child 와 last-of-type 도 똑같은 개념으로 적용된다고 보면된다.

 

div > p:last-child

• div의 자손 요소중에 first-child를 고르는데 그게 p이면 스타일을 적용한다.
• 만일 p가 없다면 스타일을 적용하지 않는다.

.parent > span:last-child {
	background: lightgreen;
}

.parent2 > p:last-child {
	background: lightgreen;
}

See the Pen Untitled by barzz12 (@inpaSkyrim) on CodePen.

 

div > p:last-of-type

• div의 자손요소중에 p태그를 모두 고르고 그중에 first-of-type만 스타일을 적용한다.

.parent > span:last-of-type {
	background: lightgreen;
}

.parent2 > p:last-of-type {
	background: lightgreen;
}

See the Pen Untitled by barzz12 (@inpaSkyrim) on CodePen.