Basic Filter Selectors
In this page:
First Filter
Appending :first to a selector narrows a multi-element match down to just the very first element in document order. It's equivalent to using :eq(0) but reads more clearly. Since jQuery evaluates filters after the base selector runs, :first still requires jQuery to first find every match before narrowing down.
Example: First Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>A</li><li>B</li><li>C</li>
<script>
console.log($("li:first").text());
</script>
</body>
</html>Last Filter
The :last filter is the mirror image of :first -- it keeps only the final matching element in document order, discarding every match before it. This is commonly combined with a base selector, like 'li:last', to grab the final item in a specific list.
Example: Last Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>A</li><li>B</li><li>C</li>
<script>
console.log($("li:last").text());
</script>
</body>
</html>Even and Odd
':even' and ':odd' use zero-based indexing, so ':even' actually selects the 1st, 3rd, 5th... elements visually, since index 0 counts as even -- a common source of off-by-one confusion for beginners.
Example: Even and Odd
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>A</li><li>B</li><li>C</li><li>D</li>
<script>
$("li:even").css("background", "yellow");
</script>
</body>
</html>Equal Filter
':eq(n)' selects a single element at a specific zero-based position in the match set, giving you precise control when :first and :last aren't specific enough. Because positions are zero-based, :eq(2) actually selects the third matching element, not the second.
Example: Equal Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>A</li><li>B</li><li>C</li>
<script>
console.log($("li:eq(2)").text());
</script>
</body>
</html>Not Filter
':not(selector)' excludes any element matching the inner selector from the result, letting you select 'everything except' a particular group in one expression. This is especially handy for styling 'every button except the currently active one' without manually excluding it in your markup.
Example: Not Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button class="active">A</button><button>B</button><button>C</button>
<script>
$("button:not(.active)").css("opacity", "0.5");
</script>
</body>
</html>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: