Question 241891 in Html Question posted in
Some basic documentation can be found here.

Html – Using Pure CSS to Access and Style Span Content

I’m working with a dynamic data table, and I need the text color in the availability column to change dynamically depending on the package status from a generic database. Specifically, I want "In Stock" to be green and "Out of Stock" to be red. Here’s a simplified version of the HTML structure:

<div class="fd-datatable">
    <div class="innerScrollContainer">
        <div class="row" role="row" tabindex="0" aria-rowindex="1" aria-label="row">
            <div aria-colindex="1" role="gridcell">
                <!-- ... other columns ... -->
                <div aria-colindex="4" role="gridcell">
                    <span>In Stock</span>
                </div>
                <!-- ... other columns ... -->
            </div>
        </div>
        <!-- ... other rows ... -->
    </div>
</div>

How can I access the text within the tag, for each row so that I can change its color, using only CSS?

Tags:

2

Answers


  1. 0

    You cannot do this but here is a little hack to achieve what you want. It relies on the fact that both text won’t take the same width so I will use the size as a condition to apply a different coloration.

    Here is a simplified example. The 90px is what control the condition, you need to adjust it based on you real code

    span {
  display: inline-block;
  font-size: 20px;
  color: #0000;
  background: 
    linear-gradient(green 0 0) 0/calc(90px - 100%) 1%,
    linear-gradient(red   0 0) 0/calc(100% - 90px) 1%;
  -webkit-background-clip: text;
          background-clip: text;
}
    <span>In Stock</span>
<span>Out of Stock</span>
<span>Out of Stock</span>
<span>In Stock</span>

    I have detailed article where I explain such a trick and more: https://css-tricks.com/responsive-layouts-fewer-media-queries/

    Login or Signup to reply.
  2. 0

    I understand that this differs from what you have in your post, and that you already have a solution. But this may be a decent alternative as well, given that you have control over rendering the DOM.

    I am assuming that wanting this done in pure CSS is driven by wanting the least amount of manual alterations to an element to get it to show how you want. Personally what I like to do in this instance is instead of filling the span with the text and trying to have the functionality driven by the text entered, I would make a class specific to each instance, and have the all the functionality including the text be driven off of that.

    So here I have a pure CSS example of this functionality. Given that when you are rendering your DOM elements, instead of applying the text you need for each one, you apply the class you need for each one.

    span {
  display: inline-block;
  font-size: 20px
}
span.no-stock:before {
  color: red;
  content: "Out Of Stock"
}
span.in-stock:before {
  color: green;
  content: "In Stock"
}
    <span class="in-stock"></span>
<span class="no-stock"></span>
<span class="no-stock"></span>
<span class="in-stock"></span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search