×

Save Your Code

If you click the save button, your code will be saved, and you get an URL you can share with others.

By clicking the "Save" button you agree to our terms and conditions.

Report Error

×

Save to Google Drive

If you have a Google account, you can save this code to your Google Drive.

Google will ask you to confirm Google Drive access.

×

Open from Google Drive

If you have saved a file to Google Drive, you can open it here:

Result Size: 625 x 571
x
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var btn = $(this).text();
    $("p").css("background-color", "white"); 
    $("p" + btn).css("background-color", "yellow");  
  });
});
</script>
</head>
<body>
<h1>This is a heading in body</h1>
<p>The first paragraph in body.</p>
<p>The second paragraph in body.</p>
<div style="border:1px solid;">
  <span>This is a span element in div</span>
  <p>The first paragraph in div.</p>
  <p>The second paragraph in div.</p>
  <p>The third paragraph in div.</p>
  <p>The last paragraph in div.</p>
  <span>This is a span element in div</span>
</div><br>
<div style="border:1px solid;">
  <p>The first paragraph in another div.</p>
  <p>The second paragraph in another div.</p>
  <p>The last paragraph in another div.</p>
</div>
<p>The last paragraph in body.</p>
<button>:nth-child(2)</button>
<button>:nth-last-child(2)</button>
<button>:nth-of-type(2)</button>
<button>:nth-last-of-type(2)</button>
</body>
</html>
×

Report a Problem: