Is it possible to style the button where the number is greater than 25, similar to how we did with numbers greater than 15?
Your assistance is greatly appreciated. Thank you.
I have been struggling to apply specific styling to a particular item in my HTML code without success.
<div class="calc">
<div id="display" class="display">0</div>
<div class="keypad">
<div class="keys-row first-keys-row">
<div class="key clear-all">AC</div>
<div class="key show-display">80</div>
<div class="key show-display">85</div>
<div class="key show-display">90</div></div>
<div class="keys-row">
<div class="key show-display">20</div>
<div class="key show-display">25</div>
<div class="key show-display">30</div>
<div class="key show-display">35</div></div>
<div class="keys-row">
<div class="key show-display">5</div>
<div class="key show-display">10</div>
<div class="key show-display">15</div>
<div class="key calculate">=</div></div></div></div>
<style>
.calc {
color: #fff;
width: 400px;
padding: 10px;
background-color: #302d2d;
border: 10px solid #302d2d;
border-bottom: 5px solid #302d2d;
border-radius: 10px;
margin-left: 10px;}
.calc .display {
font-size: 40px;
margin-bottom: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: gray;
border: 10px solid gray;
border-radius: 10px;
color: black;
height: 80px;}
.keys-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;}
.keypad .keys-row .key {
background-color: #999191;
font-size: 35px;
text-align: center;
width: 95px;
line-height: 75px;
border-radius: 50px;
margin: 0 5px;
cursor: pointer;
user-select: none;}
.keypad :first-child :nth-child(1){
background-color: black;}
.keypad .keys-row .key:active{
background-color: #a5a5a590;}
.keypad :last-child :nth-child(4){
background-color: lightseagreen;}
.keypad :last-child :nth-child(4):active{
background-color: #17807a;}
.keypad :last-child :nth-child(3){
background-color: #b22222;}
.keypad :last-child :nth-child(3):active{
background-color: #801818;}
</style>