JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<parent>
  <div>
    1
    <div>
      2
      <div>
        3
      </div>
    </div>
  </div>
  <div>
    1
    <div>
      2
      <div>
        3
      </div>
    </div>
  </div>
  <div>
    1
    <div>
      2
      <div>
        3
      </div>
    </div>
  </div>
</parent>

CSS

/* decendant selector targets all 'div' tags decending from 'parent' tag*/
parent div {
 height:50px;
 width:50px;
 background-color:rgba(51, 51, 51, .5);
 float:left;
 margin:0px 10px;
 clear:both;
 color:#ffffff;
}
/* child selector targets at all first level 'div' tags that are DIRECT decendants from 'parent' tag */
parent > div {
  background-color:#fad400;
}

JavaScript

// use child selectors to get only children of spec element
// use decendant selectors to get all under spec element