JSFiddle - React, Tailwind, and code Playground

by Trần Ngọc Minh

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<ul class="my-list">
  <li>
    <a href="http://jquery.com">jQuery supports</a>
    <ul>
      <li><a href="css1">CSS1</a></li>
      <li><a href="css2">CSS2</a></li>
      <li><a href="css3">CSS3</a></li>
      <li>Basic XPath</li>
    </ul>
  </li>
  <li>
 	<a href="http://jquery.com">jQuery also supports</a>
    <ul>
      <li>Custom selectors</li>
      <li>Form selectors</li>
    </ul>
  </li>
</ul>

JavaScript

$(document).ready(function(){
    /* Chọn tất cả phần tử li là con trực tiếp 
    của ul có class là my-list như sau */
   // $("ul.my-list > li").css("background-color", "yellow");
   /* Chọn tất cả phần tử a là con 
      trực tiếp của các phần tử li ở trên */
   //$("ul.my-list > li > a").css("background-color", "yellow");
   /* Chọn tất cả phần tử a là hậu duệ của li */
   $("ul.my-list > li a").css("background-color", "yellow");
   /* Chọn tất cả các phần tử:
					- ul là anh em của a
					- a là con trực tiếp của li
					- li là con trực tiếp của ul có class là my-list */
    //$("ul.my-list > li > a ~ ul").css("background-color", "yellow");
});