JSFiddle - React, Tailwind, and code Playground

by x7ee1

HTML

<section class="container">
  <article class="flex-parent">
    <p>This is text in flex-parent (odd)</p>
  </article>

  <article class="flex-parent">
    <p>This is text in flex-parent (even)</p>
  </article>

  <article class="flex-parent">
    <p>This is text in flex-parent (odd)</p>
  </article>
  
  <article class="flex-parent">
    <p>This is text in flex-parent next</p>
  </article>
  
  <article class="flex-parent">
    <p>This is text in flex-parent next</p>
  </article>
</section>

SCSS

.container{
    max-width:1000px;
    margin:0 auto;
}

.flex-parent{
    border:1px solid blue;
    position:relative;

  &:after {
    content:"";
    position:absolute;
    height:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    z-index:-1;
    background:yellow;
  }

  &:nth- {
    &of-type {
      &(odd)::after { background:orange; }
      &(even)::after { background:red; }
    }
    &child {
      &(4)::after { background: pink; }
      &(5)::after { background: green; }
    }
  }
}