क्या अंतर है: पहला-बच्चा और: पहला-प्रकार?

Question

मैं element:first-childऔर के बीच का अंतर नहीं बता सकताelement:first-of-type

उदाहरण के लिए कहो, तुम एक div था

div:first-child
→ वे सभी <div>तत्व जो अपने माता-पिता की पहली संतान हैं।

div:first-of-type
→ वे सभी <div>तत्व जो <div>उनके माता-पिता का पहला तत्व है।

यह ठीक उसी चीज की तरह लगता है, लेकिन वे अलग तरह से काम करते हैं।

कोई समझा सकता है?

Comments

पहला बच्चा केवल माता-पिता के पहले बच्चे को लक्षित करता है, जहाँ पहला प्रकार उस प्रकार के पहले बच्चे को लक्षित करता है (div या एक स्पैन या जो भी आप लक्ष्य करने की कोशिश कर रहे हैं)

— हुआंगिज़्म

पहले 'div' बच्चे में एक बड़ा भाई हो सकता है। पहला-प्रकार इस तरह के एक div का चयन करता है क्योंकि यह प्रकार का पहला बच्चा है, पहला-बच्चा उस div का चयन नहीं करेगा क्योंकि यह पहला बाल तत्व नहीं है।

— n8bar

Answer 1

मूल तत्व में एक या अधिक बाल तत्व हो सकते हैं:

<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-childऔर :last-of-type: किसी :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) में क्या अंतर है?

Comments

मैं आखिरकार समझ गया। अगर मुझे एक div एलिमेंट के तहत पहला डिव चाहिए तो मैं div कहूँगा: फर्स्ट-ऑफ़-टाइप, क्योंकि इसके ऊपर नॉन-डिवाइड एलिमेंट्स हो सकते हैं। यह थोड़ा भ्रमित करने वाला था, लेकिन मैं अब समझ गया हूं। यह एक उत्कृष्ट और बहुत जानकारीपूर्ण पोस्ट है। धन्यवाद और आपकी मदद की बहुत सराहना की गई।

मैंने इस उत्तर के आधार पर एक नमूना बनाया है: codepen.io/bigtinabang/pen/pmMPxO

— Tina Chen

Answer 2

मैंने first-childऔर के बीच के अंतर को प्रदर्शित करने के लिए एक उदाहरण बनाया हैfirst-of-type यहां है।

एचटीएमएल

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

सीएसएस

.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/ पर जाएं

Answer 3

प्रथम-बाल-प्रकार और पहले-बच्चे के बीच के अंतर को उदाहरण के साथ समझा जा सकता है। आपको मेरे द्वारा बनाए गए follwing उदाहरण को समझने की आवश्यकता है और यह वास्तव में काम करता है आप अपने संपादक में कोड पेस्ट कर सकते हैं आप समझ पाएंगे कि वे क्या हैं और कैसे हैं वे काम करते हैं

पहले प्रकार के लिए कोड # 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 को स्टाइल किया जाएगा और इसका रंग लाल होगा। अगर हम डालते हैं तो .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>

परिणाम:

अगर हम .p2 को दूसरे div 2 के बाद डालते हैं तो यह लाल नहीं होगा लेकिन पहले मामले में यह काम कर रहा था।