Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS I can't colorize a specific item of my html

Nil

New Coder
I want to colorize <div class="key show-display">20</div> like a number 15. How I do that? Thank you.

HTML:
<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>
 
Last edited by a moderator:
Hello. What does that mean, colorize something like a number 15 ? Please explain.
And please post your code in proper code tags using the </> button.
Posting complete code, that someone can just copy and run, is to be preferred. If that is not practical, post only the code that is relevant (I think a lot of stuff here isn't).
 
Do you mean something like this:
Code:
....
    .keypad :last-child :nth-child(3){color:blue;
    background-color: #b22222;}
    .keypad :last-child :nth-child(3):active{color:blue;
    background-color: #801818;}
  </style>
 
To colorize the div with the class show-display and the value of 20, you can use the following CSS code:

cssCopy code
.key.show-display:contains('20') {
color: red;
}

This code will select any div element with a class of show-display that contains the text "20", and apply the color red to it. You can replace "red" with any other color of your choice.

Alternatively, if you want to style the div with the class show-display and a value of 15, you can use the following CSS code:

cssCopy code
.key.show-display:contains('15') {
color: blue;
}

This code will select the div element with a class of show-display that contains the text "15", and apply the color blue to it. You can replace "blue" with any other color of your choice.

Keep in mind that the :contains() selector is case-sensitive and will only work for exact matches. If the text in the div is not exactly "15" or "20", this code will not work.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom