Content Filter Selectors
Contains Text
The :contains() filter checks each element's rendered text and keeps only the ones containing the exact substring you pass in. The match is case-sensitive, so capitalization has to match exactly.
Example: Contains Text
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>Big Sale</p><p>Regular price</p>
<script>
console.log($("p:contains('Sale')").text());
</script>
</body>
</html>Has Descendant
':has(selector)' keeps an element only if a descendant matching the inner selector exists somewhere inside it, which is useful for finding containers based on what they hold rather than their own attributes.
Example: Has Descendant
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div><span>Inner</span></div><div>No span</div>
<script>
console.log($("div:has(span)").length);
</script>
</body>
</html>Empty Elements
':empty' matches elements with no child nodes and no text content at all -- even a single space of whitespace disqualifies an element from this filter. This filter is often used to detect and hide placeholder containers that haven't been populated with real content yet.
Example: Empty Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div></div><div>Text</div>
<script>
console.log($("div:empty").length);
</script>
</body>
</html>Parent Elements
':parent' is the opposite of :empty -- it matches any element that does contain child nodes or text, making it handy for skipping placeholder or empty containers. This is the inverse tool for the same job, letting you target only the containers that actually have something inside them.
Example: Parent Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div></div><div>Text</div>
<script>
console.log($("div:parent").length);
</script>
</body>
</html>Combine Content Filters
Content filters chain onto normal selectors just like any other filter, so 'li:contains("Sale")' first narrows to list items, then filters by their text in a single expression. Understanding this chaining order is key to writing efficient selectors that don't search more of the page than necessary.
Example: Combine Content Filters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>Sale Item</li><li>Regular Item</li>
<script>
console.log($("li:contains('Sale')").text());
</script>
</body>
</html>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: