CSS: Могу ли я выбрать значение данных больше чем? - PullRequest
Новая
       4

CSS: Могу ли я выбрать значение данных больше чем?

0 голосов
/ 23 марта 2020 
<div data-age="30">30</div>

Есть ли способ получить (PURE CSS) div красным цветом, когда возраст <18 лет, и синим цветом, где возраст> 18

1 Ответ

1 голос
/ 23 марта 2020

Вот идея, основанная на этом предыдущем ответе , где вы можете рассмотреть CSS переменные: 

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

Вы также можете сделать это для окраски текста: 

.box {
  font-size:30px;
  padding:5px;
  display:inline-block;
  font-family:monospace;
  overflow:hidden;
  border:5px solid transparent;
  background:
     linear-gradient(#fff,#fff) padding-box,
     linear-gradient(red,red) 0 0/100% calc((18 - var(--a))*1px),
     blue;
}
.box:before {
  content:attr(style);
  text-indent:-4ch;
  display:inline-block;
  color:transparent;
  background:
     linear-gradient(red,red) 0 0/100% calc((18 - var(--a))*1px),
     blue;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
<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>
...