Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> </head> <body> <ul data-group="Books"> <li data-book="JavaScript">JavaScript</li> <li data-book="CSS">CSS</li> <li data-book="HTML">HTML</li> </ul> <script> $(document).ready(function() { //stored selector let group = $('ul[data-group="Books"]'); //data-book starts with C let css = $('[data-book^="C"]', group).css('color', '#qc87c9'); //data-book contains script let javascript = $('[data-book*="Script"]', group).css('color', '#8ebf42'); //data-book ends with ML let html = $('[data-book$="ML"]', group).css('color', '#ff0000'); }); </script> </body> </html>