JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<h2 class="clear">:first-child</h2>

<ul class="first">
    <li>list0</li>
    <li>list1</li>
    <li>list2</li>
</ul>
<ul class="first">
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
</ul>

CSS

.clear{clear:both;}
h2{padding:15px 0 5px 10px;
   font-size:20px;
    color:blue;
    border-top:1px solid #eee;
}

ul{margin:15px;}
li{padding:2px 0;}

JavaScript

$(function(){
    


/* :first-child */
//ul liのうちの、親要素毎の最初のliを赤くする
 $("ul.first li:first-child").css("color", "red");


    
    
//end    
});