JSFiddle - React, Tailwind, and code Playground

Experimenting with finding lone newlines when the structure is too flat.

by nilloc

HTML

<div class='holder'>
  <div>if</div>
  <newline>1</newline>
</div>

<div class='holder'>
  <div>if</div>
  <newline>1</newline>
  <div>else</div>
  <newline>2</newline>
</div>

<div class='holder'>
  <div>if</div>
  <newline>1</newline>
  <div>else</div>
  <newline>2</newline>
  <newline>3</newline>
</div>

<div class='holder'>
  <div>if</div>
  <newline>1</newline>
  <newline>2</newline>
  <div>else</div>
  <newline>3</newline>
</div>

<div class='holder'>
  <div>if</div>
  <newline>1</newline>
  <div>else if</div>
  <newline>2</newline>
  <div>else</div>
  <newline>3</newline>
</div>

CSS

.holder {
  display: block;
  background: teal;
  padding: 20px;
  margin-bottom: 5px;
}

newline:nth-of-type(1) {
  background-color: red;
}

newline:nth-of-type(2) {
  background-color: green;
}

newline:nth-of-type(3) {
  background-color: blue;
}

newline:only-of-type,
newline:nth-of-type(1),
newline:nth-of-type(2):last-of-type {
  height: 20px;
  display: block;
  /* this fails for if else if else! */
}