JSFiddle - React, Tailwind, and code Playground

by victorrseloy

HTML

<body>
    <div class='red'>I should be red!</div>
    <div class='red'>I should be red too!</div>
    <div id="myElement">I should be blue!"
        <div>But I want to be green!</div>
        <div>But I want to be orange!</div>
    </div>
    <div class='red'>Red please!</div>
</body>

CSS

div {
    margin: 10px 0px;
}

.red:last-child{
  background: green;
}

div:last-child{
  background: yellow;
}

JavaScript

/* $('div:first')
.css('background','red')
.next()
.css('background','red')
.next().css('background','blue').find('div:first').css('background','green').next().css('background','orange').parent().next().css('background','red')
 */
//document.querySelector('.red:last-child').style.backgroundColor = "purple";
/* 

for(var infinite = 0;infinite < 100000;infinite++){

  $('.red')
  .css('background','red');

  var firstElement = $('#myElement');

  firstElement.css('background','blue');

  var fistChild = firstElement.find('div:first').css('background','green');
  $('#myElement > div:first').css('background','green');

  fistChild.next().css('background','orange').text(infinite);
} */

//$('#myElement > div:last').css('background','orange');




/* document.getElementById('myElement').style.backgroundColor = 'blue';
var red = document.querySelectorAll('.red');
console.log(red)
for(var i= 0;i<red.length;i++ ){
  red[i].style.backgroundColor = 'red';
}
console.log(document.getElementById('myElement').firstElementChild)
document.getElementById('myElement').firstElementChild.style.backgroundColo = 'green' ;
 */
/*
    
    DESCRIPTION:
    
    Each of the <div><\div> elements wants to be assigned a color or have an event binded to it. 
    Use JQuery to give them their desired features.

    Write your JavaScript/JQuery code in this window.
    Hit the 'Run' button in the top toolbar when you are done.
    
 */