<!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>