How to display some CSS content for div[data-attr="false"]:first-ot-type?

Question

Is is possible to display "HEADER FOR OLD DATA" only for the very first row of OLD data and not repeating it for each (in the same way blue border is not repeated)?

Considering (1) has been solved, is it possible (via content:"..."?) to display "no new data" if shadow div contains only <div data-is-new="false">OLD data</div> (see example 2)?

.shadow {
  margin-bottom: 50px
}

div[data-is-new='false'] {
  color: rgb(199, 199, 199);
  background-color: rgba(247, 247, 247, 0.57);
  border-top: 2px solid blue;
}

div[data-is-new='false']::before {
  display: block;
  content: "HEADER FOR **OLD** DATA";
  color: black;
}

div[data-is-new='false']~div[data-is-new='false'] {
  border-top: none;
}

<p>Example 1</p>
<div class="shadow">
  <div class="header">HEADER FOR *NEW* DATA</div>
  <div data-is-new="true">new data</div>
  <div data-is-new="true">new data</div>
  <div data-is-new="true">new data</div>
  <div data-is-new="true">new data</div>
  <div data-is-new="false">OLD data</div>
  <div data-is-new="false">OLD data</div>
  <div data-is-new="false">OLD data</div>
</div>

<p>Example 2</p>
<div class="shadow">
  <div class="header">HEADER FOR *NEW* DATA</div>
  <span>No new data display via CSS with "content"?</span>
  <div data-is-new="false">OLD data</div>
  <div data-is-new="false">OLD data</div>
  <div data-is-new="false">OLD data</div>
</div>

Answer 1

If your structure will always be new data then old data you can try like below:

.shadow {
  margin-bottom: 50px
}
div[data-is-new='false'] {
  color: rgb(199, 199, 199);
  background-color: rgba(247, 247, 247, 0.57);
}
div:nth-child(1 of [data-is-new='false']) {
  border-top: 2px solid blue;
}

/* select only the first one */
div:nth-child(1 of [data-is-new='false'])::before {
  display: block;
  content: "HEADER FOR **OLD** DATA";
  color: black;
}
/* if no new data, show content after the header element */
.shadow:not(:has([data-is-new='true'])) .header::after {
  content:"No new data display";
  display: block;
}
/* for better support use the below 
   if the second child is old then you don't have new (considering the order will always be new then old)
div:[data-is-new='false']:nth-child(2)::before {
  content:"No new data display";
  display: block;
} */

<p>Example 1</p>
<div class="shadow">
  <div class="header">HEADER FOR *NEW* DATA</div>
  <div data-is-new="true">new data</div>
  <div data-is-new="true">new data</div>
  <div data-is-new="true">new data</div>
  <div data-is-new="true">new data</div>
  <div data-is-new="false">OLD data</div>
  <div data-is-new="false">OLD data</div>
  <div data-is-new="false">OLD data</div>
</div>

<p>Example 2</p>
<div class="shadow">
  <div class="header">HEADER FOR *NEW* DATA</div>
  <div data-is-new="false">OLD data</div>
  <div data-is-new="false">OLD data</div>
  <div data-is-new="false">OLD data</div>
</div>