JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container mt-3 mb-3">

  <h4>Example 1</h4>

  <p>In <code>.example-1</code> list, if three children exist make <code>background:red;</code></p>
  
  <p><strong>Two Children</strong></p>
  
  <ul class="list-group mt-3 mb-3 example-1">
    <li class="list-group-item">
      Cras justo odio
    </li>
    <li class="list-group-item">
      Dapibus ac facilisis in
    </li>
  </ul>
  
  <p><strong>Three Children</strong></p>
  
  <ul class="list-group mt-3 mb-3 example-1">
    <li class="list-group-item">
      Cras justo odio
    </li>
    <li class="list-group-item">
      Dapibus ac facilisis in
    </li>
    <li class="list-group-item">
      Morbi leo risus
    </li>
  </ul>
  
  <p><strong>Four Children</strong></p>
  
  <ul class="list-group mt-3 mb-3 example-1">
    <li class="list-group-item">
      Cras justo odio
    </li>
    <li class="list-group-item">
      Dapibus ac facilisis in
    </li>
    <li class="list-group-item">
      Morbi leo risus
    </li>
    <li class="list-group-item">
      Lorum ipsum
    </li>
  </ul>

  <hr/>

  <h4>Example 2</h4>

  <p>In <code>.example-2</code> list, make second child and all children after the second child <code>background:red;</code></p>
  
  <p><strong>Two Children</strong></p>
  
  <ul class="list-group mt-3 mb-3 example-2">
    <li class="list-group-item">
      Cras justo odio
    </li>
    <li class="list-group-item">
      Dapibus ac facilisis in
    </li>
  </ul>
  
  <p><strong>Three Children</strong></p>

  <ul class="list-group mt-3 mb-3...

SCSS

HR {
  margin: { top: 4rem; bottom: 4rem; }
}

.example-1 {
  LI:first-child:nth-last-child(3),
  LI:first-child:nth-last-child(3)~LI {
    background: red;
  }
}

.example-2 {
  LI:nth-child(n + 2) {
    background: red;
  }
}

.example-3 {
  
  /* Need help with this one please */

}