JSFiddle - React, Tailwind, and code Playground

by dipaks2011

HTML

<h1>CSS :nth-child</h1>
<table width="400" border="1">
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
    <tr><td>Row 5</td></tr>
    <tr><td>Row 6</td></tr>
</table>

<br />
<h1>CSS :nth-last-child</h1>
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
</ul>

<br /><br />
<h1>CSS :nth-last-child</h1>
<div>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<p>Five</p>
</div>

<br /><br />
<h1>CSS :nth-of-type</h1>
<div>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<p>Five</p>
<p>Six</p>
<div>

CSS

h1{
    font-size: 2em;
    font-weight: bold;
}
td{
    height: 26px;
}
tr:nth-child(2n+1) {
    background: #ccc;
}
/*tr:nth-child(odd) {
    background: #0f0;
}*/

li:nth-last-child(-n+4) {
  color: red;
}

p:nth-last-child(1) {
  color: blue !important;
}

div>p:nth-of-type(5) {
    color: green;
}