Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hierarchy: descendant, child, siblings</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>.hit{background:#bbdefb;}</style> </head> <body> <ul id="list"> <li><span>A</span></li> <li><span>B</span></li> <li class="x"><span>C</span></li> </ul> <p class="x">Outside</p> <button id="desc">#list li span (descendant)</button> <button id="child">#list > li (child)</button> <button id="adj">.x + p (adjacent sibling)</button> <button id="gen">.x ~ * (general siblings)</button> <script> $("#desc").click(function(){ $("#list li span").toggleClass("hit"); }); $("#child").click(function(){ $("#list > li").toggleClass("hit"); }); $("#adj").click(function(){ $(".x + p").toggleClass("hit"); }); $("#gen").click(function(){ $(".x ~ *").toggleClass("hit"); }); </script> </body> </html>
Output