Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

css selectors - CSS: Can I select data value greater than?

<div data-age="30">30</div>

Is there a way to have (PURE CSS) div in red when age<18 and in blue where age>18

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Here is an idea based on this previous answer where you can consider CSS variables:

.box {
  font-size:30px;
  padding:5px;
  display:inline-block;
  font-family:monospace;
  overflow:hidden;
  color:#fff;
  background:
     linear-gradient(red,red) 0 0/100% calc((18 - var(--a))*1px),
     blue;
}
.box:before {
  content:attr(style);
  text-indent:-4ch;
  display:inline-block;
}
<div style="--a:30" class="box"></div>
<div style="--a:18" class="box"></div>
<div style="--a:9 " class="box"></div>
<div style="--a:17" class="box"></div>
<div style="--a:0 " class="box"></div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...