JSFiddle - React, Tailwind, and code Playground

by Glen Robson

HTML

<div class="parent">
    <p>Paragraph</p>
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
</div>

<div class="parent">
    <p>Paragraph</p>
    <div>Broken</div>
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
</div>

CSS

.parent{
    border:1px solid #000;
    margin-bottom:10px;
}

/*** First Test ***/
/*
.child:first-child{
    background-color:#f00;
}
*/

/*** Second Test ***/
/*
.child:nth-of-type(1){
    background-color:#f00;
}
*/

/*** Third Test ***/
.child{
    background-color:#f00;
}
.child ~ .child{
    background-color:#fff;
}