如何显示 div[data-attr="false"]:first-ot-type 的一些 CSS `content`？

Question

考虑下面的

html

/

css

，一个关于CSS选择器的双重问题。

1. 是否可以仅对旧数据的第一行显示“HEADER FOR OLD DATA”，而不对每行重复显示（以同样的方式，蓝色边框不重复）？

2. 考虑到（1）已经解决，如果

   content:"..."

   shadow

   仅包含

   div

   （参见示例2），是否可以（通过

   <div data-is-new="false">OLD data</div>

   ？）显示“无新数据”？

谢谢。

.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

如果您的结构始终是新数据，那么您可以尝试使用旧数据，如下所示：

.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;
}

/* disable the content of all the next ones */
.shadow div[data-is-new='false'] ~ div[data-is-new='false']::before {
  content: none;
}

/* if no new data, show content after the header element */
.shadow:not(:has([data-is-new='new'])) .header:after {
  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>