JSFiddle - React, Tailwind, and code Playground

by Rijo R

HTML

<!-- css child pointing example -->
<div>
  <ul>
    <li>red</li>
    <li>yellow</li>
  </ul>
</div>
<div>
  <ul>
    <li>green</li>
  </ul>
</div>

<div>
<p>red</p>
<p>blue</p>
<p>green</p>
<p>orange</p>
<p>orange</p>
</div>

<!--Css advance selectors -->

<div>
<p>test me outside another div</p>
<section>
<p>test me outside another div</p>
<p>test me inside another div</p>
<p>test me inside another div</p>
<p>test me inside another div</p>
</section>
<p>test me outside another div</p>
<p>test me outside another div</p>
</div>
<p>Immediate after</p>
<p>Immediate after</p>
<section><p>
Given all ul immediate after section tag
</p></section>
<ul>
<li>After p tag</li>
</ul>

<ul>
<li>After p tag</li>
</ul>

<ul>
<li>After p tag</li>
</ul>

<div>
<a href="link.html">Dont click</a><br>
<a href="green.html" target="_blank" title="">Click move to next</a><br>
<a href="green.html" target="_blank" title="flower">Click move to next</a><br>
<a href="green.html" target="_blank" title="orange are not flowers">Click move to next</a><br>
<a href="green.html" target="_blank" title="title flower">Click move to next</a><br>
</div>

<p class="en">Hello!</p>
<p class="en-us">Hi!</p>
<p class="ening-gb">Ello!</p>
<p class="us-en">Hi!</p>
<p class="no">Hei!</p>

<a href="w3scool.com">W3 school</a>
<a href="w3scool.com">W3 school</a>
<a href="w3scool.in">W3 school</a>

<p class="as">
After me
</p>

<input type="radio" name="age">Age1<br><input type="radio" name="age">Age2
<br>
<p title="first">First letter</p>

CSS

div:first-child ul li:first-child{ color:red }
div:first-child ul li:last-child{ color:yellow }
div:nth-child(2) ul { color:green }

div:nth-child(3) p:nth-child(odd) { color:pink; }
div:nth-child(3) p:nth-child(even) { color:orange; }
div:nth-child(3) p:nth-child(5n+0) { color:orange; }

div p { color: red; }
div > p { color:yellow; } 
div + p { color:green; }

section ~ ul { background:pink; }

a { color:red; }
a[target] { color:green; }
a[title~=flower] { background:yellow}
p[class$=en] { background:blue; }
p[class|=en] { background:#5c5c5c; }
p[class^=en] { background:orange; }

a[href*=w3scool] { background:#ccc}
a[href$=com] { background:red}
a[href$=in] { background:green}
p[class$=as] { position:relative;}
p[class$=as]::after { content:'>'; position:absolute; top:2px; }
p[class$=as]::before { content:'<'; }
input[type=radio]:checked { width:35px; height:35px; }
p[title^=first]::first-letter {
    font-size: 200%;
    color: #8A2BE2;
}