Child Filter Selectors
In this page:
$("selector:first-child")
$("selector:last-child")
$("selector:nth-child(n)")
$("selector:only-child")First Child
':first-child' किसी element को सिर्फ तभी match करता है जब वह अपने parent के अंदर बिल्कुल पहला child हो, वह tag चाहे जो भी हो। ध्यान दें यह :first से अलग है, जो सिर्फ current selection के अंदर ही match करता है।
उदाहरण: First Child
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul><li>First</li><li>Second</li></ul>
<script>
console.log($("li:first-child").text());
</script>
</body>
</html>Last Child
':last-child' :first-child का mirror है -- यह किसी element को सिर्फ तभी match करता है जब वह अपने parent का आख़िरी child हो, किसी list के बिना उसकी length जाने अंत को style या target करने के लिए उपयोगी।
उदाहरण: Last Child
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul><li>First</li><li>Second</li></ul>
<script>
console.log($("li:last-child").text());
</script>
</body>
</html>Only Child
':only-child' किसी element को सिर्फ तभी match करता है जब उसका बिल्कुल कोई sibling element न हो -- अगर parent में एक भी दूसरा child है, तो यह filter उसे exclude कर देता है। यह :first-child या :last-child से एक stricter check है, क्योंकि इसके लिए बिल्कुल कोई siblings न होना ज़रूरी है, सिर्फ पहले या बाद के नहीं।
उदाहरण: Only Child
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div><p>Alone</p></div><div><p>A</p><p>B</p></div>
<script>
console.log($("p:only-child").length);
</script>
</body>
</html>Nth Child
':nth-child(n)' children को उनके parent के अंदर numeric position से select करता है, और हर दूसरी row जैसे patterns चुनने के लिए 2n या odd जैसे formulas भी accept करता है। यह formula flexibility nth-child को alternating table rows को style करने या हर तीसरे grid item को चुनने के लिए ideal बनाती है।
उदाहरण: Nth Child
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
<script>
$("li:nth-child(2n)").css("background", "lightgray");
</script>
</body>
</html>Child Filters को साथ में
किसी parent selector के साथ child filters chain करना, जैसे '.list > li:nth-child(3)', precise, position-aware targeting के लिए structural position को tag या class context के साथ combine करता है। इस तरह selectors को layer करना आपको बहुत specific elements target करने देता है, जैसे 'इस particular list का तीसरा item', अपने markup में extra classes जोड़े बिना।
उदाहरण: Child Filters Together
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul class="list"><li>1</li><li>2</li><li>3</li></ul>
<script>
console.log($(".list > li:nth-child(3)").text());
</script>
</body>
</html>:first-childको:firstके साथ confuse करना, जबकिli:first-childअपने parent में पहले हर<li>को match करता है औरli:firstoverall सिर्फ एक match return करता है।- text siblings वाले किसी element पर
:only-childइस्तेमाल करना, यह भूलकर कि यह सिर्फ element siblings count करता है। :nth-child(n)को 0 से count करना, जबकि यह 1 से शुरू होता है, इसलिएli:nth-child(1)पहला item है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: