Question 228154 in CSS Question posted in
Some basic documentation can be found here.

Color specific text in CSS

I have a component that shows a few different values such as Low / Date, Medium / Date and High / Date.

I’m trying to find a way to find the parent div named .parent and change the color of the text inside according to its value.

For example, if div .parent will include Low / Date, "Low" will be green, and if the text will be High / Date, the "High" will be colored red (and the date part will stay default black).

Is that possible with CSS only?

Tags:

2

Answers


  1. 0

    The ::before pseudo-element is used to insert content before the element it is applied to. In this case, we are inserting the value of the data-value attribute before the text. We then use the color property to change the color of the text depending on its value.

    .parent {
  font-size: 16px; /* Default font size */
  color: black;   /* Default text color */
}

.parent p::before {
  content: attr(data-value); /* Get the value from the data-value attribute */
  color: green;              /* Default color for "Low" */
}

.parent p[data-value="Medium"]::before {
  color: orange; /* Change color for "Medium" */
}

.parent p[data-value="High"]::before {
  color: red; /* Change color for "High" */
}
    <div class="parent">
  <p data-value="Low">Low / Date</p>
  <p data-value="Medium">Medium / Date</p>
  <p data-value="High">High / Date</p>
</div>
    Login or Signup to reply.
  2. 0

    To be honest, I am not sure if it is possible with CSS. I tried making one in CSS but it does not work how I think you would want it.

    CSS:

    Here is the code for attempting it in CSS. The value shown in the center of the page is set by the ‘data-number’ variable inside the body. While you can use this value, it is not easy to manipulate unless you manually do it.

    <!DOCTYPE html>
<html>
<head>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  
  .number {
    font-size: 48px;
    text-align: center;
    position: relative;
  }
  
  .number::before {
    content: attr(data-number);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
  }
  
  .number[data-number^="9"]::before {
    color: green;
  }
  
  .number[data-number^="5"]::before,
  .number[data-number^="6"]::before,
  .number[data-number^="7"]::before,
  .number[data-number^="8"]::before {
    color: yellow;
  }
  
  .number[data-number^="0"],
  .number[data-number^="1"],
  .number[data-number^="2"],
  .number[data-number^="3"],
  .number[data-number^="4"] {
    color: red;
  }
</style>
</head>
<body>
  <div class="number" data-number="2"></div>
</body>
</html>

    JavaScript:

    I personally would do it in a JavaScript. I know that is not what you are looking for but it would probably be your best bet for having the color change.

    <!DOCTYPE html>
<html>
<head>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  
  .number {
    font-size: 48px;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="number" id="numberDisplay">9</div>

  <script>
    // Get the number display element
    const numberDisplay = document.getElementById('numberDisplay');
    
    // Get the content (text) of the number display element
    const content = numberDisplay.textContent;
    
    // Convert the content to a number
    const number = parseFloat(content);
    
    // Apply different colors based on the number
    if (number > 8) {
      numberDisplay.style.color = 'green';
    } else if (number > 4) {
      numberDisplay.style.color = 'yellow';
    } else {
      numberDisplay.style.color = 'red';
    }
  </script>
</body>
</html>

    I am not a professional, but this is what I would recommend. I looked at some other forms to see if anything similar was asked and answered but to no luck. I would love to learn if it is possible in CSS but from what I can tell, it is not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search