: first-child와 : first-of-type의 차이점은 무엇입니까?

124

element:first-child과 의 차이를 알 수 없습니다.element:first-of-type

예를 들어 div가

div:first-child
→ <div>부모의 첫 번째 자식 인 모든 요소.

div:first-of-type
→ 부모 <div>의 첫 번째 <div>요소 인 모든 요소 .

이것은 똑같은 것처럼 보이지만 다르게 작동합니다.

누군가 설명해 주시겠습니까?

css css-selectors

— BoltClock
소스

첫째 아이는 유일한 유형의 첫 번째는 해당 유형의 첫번째 아이 (DIV 또는 범위 또는 무엇이든 당신이 목표로 노력하고있다) 대상으로 부모의 첫 번째 자식 대상

— Huangism

첫 번째 'div'자식은 더 큰 형제 자매가있을 수 있습니다. first-of-type은 유형의 첫 번째 자식이므로 이러한 div를 선택하고 첫 번째 자식 요소는 첫 번째 자식 요소가 아니기 때문에 해당 div를 선택하지 않습니다.

— n8bar

207

상위 요소에는 하나 이상의 하위 요소가있을 수 있습니다.

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

이 아이들 중 한 명만이 첫 번째가 될 수 있습니다. 다음과 일치합니다 :first-child.

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

의 차이 :first-child와는 :first-of-type즉 :first-of-type, HTML에서의 태그 이름으로 표현의 요소 유형의 첫 번째 요소를 일치 하는 요소는 부모의 첫 번째 자식없는 경우에도 . 지금까지 우리가보고있는 자식 요소는 모두 divs 였지만, 잠시만 기다려주세요.

현재로서는 그 반대도 마찬가지입니다. 어떤 :first-child것도 :first-of-type필요에 따라 가능합니다. 여기에서 첫 번째 자식도 첫 번째 div이므로 유형 선택기뿐만 아니라 두 가상 클래스 와 일치 합니다div .

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

이제 첫 번째 자식의 유형을에서 div다른 h1것으로 변경하면 여전히 첫 번째 자식이되지만 더 이상 첫 번째 자식이 아닙니다 div. 대신 첫 번째 (유일한)가 h1됩니다. div동일한 부모 내에서이 첫 번째 자식 뒤에 다른 요소 가있는 경우 해당 div요소 중 첫 번째 요소가 일치 div:first-of-type합니다. 주어진 예에서 두 div번째 자식은 첫 번째 자식이 다음으로 변경된 후 첫 번째 자식이됩니다 h1.

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

그 주 :first-child에 해당합니다 :nth-child(1).

이것은 또한 어떤 요소라도 한 번에 하나의 자식 요소 만 일치 할 수 있지만, 가지고있는 자식 유형의 수만큼 의사 클래스와 :first-child일치하는 자식을 가질 수 있고 가질 :first-of-type수 있음을 의미합니다. 이 예에서 선택자 .parent > :first-of-type(암시 적 *으로 :first-of-type의사를 한정하는 )는 하나가 아닌 두 요소 와 일치합니다 .

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

:last-childand :last-of-type: any :last-child도 필요에 따라 동일합니다 :last-of-type. 부모 내에서 다른 요소가 절대로 뒤 따르지 않기 때문입니다. 그러나 마지막 div이 마지막 자녀 이기 때문에 h1마지막 자녀 임에도 불구하고 마지막 자녀가 될 수 없습니다.

:nth-child()및 :nth-of-type()기능은 매우 유사 원칙적합니다 (같이 임의의 정수 인수를 사용하는 경우 :nth-child(1)상술 한 예), 그러나이 다른 곳으로 유사한 요소의 전위 개수이다 :nth-of-type(). 자세한 내용은 p : nth-child (2)와 p : nth-of-type (2)의 차이점은 무엇입니까?

— BoltClock
소스

4

마침내 이해합니다. div 요소 아래에 첫 번째 div를 원하면 div : first-of-type을 호출합니다. 그 위에 비 div 요소가있을 수 있기 때문입니다. 조금 혼란 스러웠지만 이제 이해합니다. 이것은 훌륭하고 매우 유익한 게시물입니다. 감사합니다. 도움을 주셔서 대단히 감사합니다.

1

:이 답변에 따라 샘플을 만든 codepen.io/bigtinabang/pen/pmMPxO

— 티나 첸

14

first-child와 first-of-type여기 의 차이점을 보여주는 예제를 만들었습니다 .

HTML

<div class="parent">
  <p>Child</p>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

CSS

.parent :first-child {
  color: red;
}

.parent :first-of-type {
  background: yellow;
}

.parent p:first-child {
  text-decoration: line-through;
}

// Does not work
.parent div:first-child {
  font-size: 20px;
}
// Use this instead
.parent div:first-of-type {
  text-decoration: underline;
}
// This is second child regardless of its type
.parent div:nth-child(2) {
  border: 1px black solid;
}

전체 예제를 보려면 https://jsfiddle.net/bwLvyf3k/1/ 를 방문 하십시오.

— 웬
소스

0

첫 자식과 첫 자식의 차이점은 예제를 통해 이해할 수 있습니다. 저가 만든 다음 예제를 이해해야하며 실제로 작동합니다. 편집기에 코드를 붙여 넣을 수 있습니다. 그들은 일한다

첫 번째 유형에 대한 코드 # 1 :

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-of-type{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

결과

.p1, .p2, .p3은 스타일이 지정되고 색상은 빨간색이됩니다. 두 번째 div 뒤에 .p1을 입력해도 빨간색이됩니다.

첫 자녀를위한 코드 # 2 :

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-child{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

결과:

두 번째 div 2 뒤에 .p2를 넣으면 빨간색이 아니지만 첫 번째 경우에는 작동했습니다.

— 모두 지우기
소스