Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Content Filters</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>.mark{outline:2px dashed #ff9800;}</style> </head> <body> <div id="a">Hello <span>world</span></div> <div id="b"></div> <div id="c"><p>Para</p></div> <button id="contains">:contains('Hello')</button> <button id="has">:has(span)</button> <button id="empty">:empty</button> <button id="parent">:parent</button> <script> $("#contains").click(function(){ $("div:contains('Hello')").toggleClass("mark"); }); $("#has").click(function(){ $("div:has(span)").toggleClass("mark"); }); $("#empty").click(function(){ $("div:empty").toggleClass("mark"); }); $("#parent").click(function(){ $("div:parent").toggleClass("mark"); }); </script> </body> </html>
Output