JSFiddle - React, Tailwind, and code Playground

by Ananth Arumugasamy

HTML

<p> this is a para before div1</p>
<p class = "intro"> this is a para before div2</p>
<p class ="intro"> this is a para before div3</p>
<h1>this is heading1</h1>
<span> this is a span</span>
<div>
    <p>this is a para1</p>
    <p id ="para">this is a para2</p>
    <p class ="intro">this is a para3</p>
    <p>this is a para4</p>
    <p>this is a para5</p>
    <p>this is a para6</p>
    <span>this is a span</span>
</div>
<p> this is a para after div1</p>
<p> this is a para after div2</p>
<p> this is a para after div3</p>
<p> this is a para after div4</p>
<h3>this is heading3</h3><div>
    <p> this is a para</p>
</div>
<div></div>
<input type ="text" autofocus></input>

CSS

div{
    border: 2px solid black;
}

1. +  ---> next elt
2. ~ ---> siblings after the elt
3. eq(index)
4. gt(index), lt(index)
5. not
6. header
7. animated
8. focus
9. contains(text)
10. has
11. empty
12. root

JavaScript

$(':root').css("color","blue");
    
/*
$(':root').css("color","blue");

$('div:has(p)').click(function() {
        alert('clicked');
    });

$('p:contains(after)').click(function() {
        alert('clicked');
    });

$(document).ready(function(){
 
$(":focus").css("background-color","yellow");
});

$(':header').click(function(){
    alert("clicked");
});

$('p').not('.intro , #para').click(function(){
    alert("clicked");
});

$('p:not(.intro)').click(function(){
    alert("clicked");
});


$('p:not(:even)').click(function(){
    alert("clicked");
});

$('p:gt(1)').click(function(){
    alert("clicked");
});

$('div:eq(0)').click(function(){
    alert("clicked");
});

$('div ~ p').click(function(){
    alert("clicked");
});

$('div + p').click(function(){
    alert("clicked");
});*/