<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Select Element by Compound Selector</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ // Highlight only paragraph elements with class mark $("p.mark").css("background", "pink"); // Highlight only span elements inside the element with ID mark $("#mark span").css("background", "blue"); // Highlight li elements inside the ul elements $("ul li").css("background", "green"); // Highlight li elements only inside the ul element with id mark $("ul#mark li").css("background", "orange"); // Highlight li elements inside all the ul element with class mark $("ul.mark li").css("background", "red"); // Highlight all anchor elements with target blank $('a[target="_blank"]').css("background", "pink"); }); </script> </head> <body> <p>Selecting Elements by ID.</p> <p class="mark">To select a solitary element with a unique ID on a page, the ID selector can be utilized.</p> <p>This constitutes an additional paragraph.</p> <ul> <li>List one</li> <li>List two</li> <li>List three</li> </ul> <ul id="mark"> <li>List one</li> <li>List <span>two</span></li> <li>List three</li> </ul> <ul class="mark"> <li>List one</li> <li>List two</li> <li>List three</li> </ul> <p>Go to <a href="https://www.simmanchith.com/" target="_blank">Home page</a></p> </body> </html>