Child Filter Selectors
In this page:
First Child
':first-child' matches an element only when it is the very first child inside its parent, regardless of what tag it is. Note this differs from :first, which only ever matches within the current selection.
Example: 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' is the mirror of :first-child -- it matches an element only when it's the final child of its parent, useful for styling or targeting the end of a list without knowing its length.
Example: 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' matches an element only when it has no sibling elements at all -- if the parent contains even one other child, this filter excludes it. This is a stricter check than :first-child or :last-child, since it requires there to be no siblings at all, not just no earlier or later ones.
Example: 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)' selects children by their numeric position within their parent, and also accepts formulas like 2n or odd for picking out patterns such as every second row. This formula flexibility makes nth-child ideal for styling alternating table rows or picking out every third grid item.
Example: 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 Together
Chaining child filters with a parent selector, like '.list > li:nth-child(3)', combines structural position with tag or class context for precise, position-aware targeting. Layering selectors this way lets you target very specific elements, like 'the third item in this particular list', without adding extra classes to your markup.
Example: 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>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: