Dynamically changing font color based on container values in HTML/CSS

Cwnova
June 19, 2023
285 views
2 votes
3 Answers

I’m not too familiar with HTML/CSS and I have a UI model pointing to this HTML/CSS code. I want to change the text color of ‘Sample Text’ below based on if the table value for let’s say, when the #MAP#PPOINDIVIDUAL_value placeholder is empty or null. Right now I have this, but it doesn’t seem to be changing it to red when the table is empty.

    document.addEventListener("DOMContentLoaded", function () {
        var rows = document.querySelectorAll("#MAP#PPOProspectTileViewDataForm tr[id$='_container']");
        var hasValue = false;

        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            var valueSpan = row.querySelector("span[id$='_value']");
            if (valueSpan && valueSpan.innerText.trim() !== "") {
                hasValue = true;
                break;
            }
        }

        var headerLink = document.querySelector("#MAP#PPOProspectTileViewDataForm .bbui-forms-summarytile-headerlinkcontainer a");
        if (!hasValue) {
            headerLink.style.color = "#999999";
        }
    });

##MAP#PPOProspectTileViewDataForm td {
  padding-top: 0px;
  padding-bottom: 0px;
}

.#MAP#BOLD {
  font-weight: bold;
}

.#MAP#CAPTION {
  padding-right: 5px;
}

##MAP#LOOKUPID_value {
  width: 80px;
}

##MAP#STATUS_value {
  width: 55px;
}

##MAP#MEMBERSHIPLEVELNAME_value {
  width: 180px;
}

.#MAP#DATATABLE {
  border-spacing: 2px 1px;
}

##MAP#ISPRIMARY_value {
  margin-right: 0px;
}

##MAP#ISPRIMARY_container,
##MAP#PRIMARYMEMBERLINK_container {
  padding-left: 0px;
  height: 16px;
}

##MAP#STATUS_caption {
  padding-left: 7px;
}

a.#MAP#BOLD:empty {
  color: red;
}

<div id="#MAP#PPOProspectTileViewDataForm">
  <div class="bbui-forms-fieldset-row">
    <div class="bbui-forms-summarytile-headerlinkcontainer">
      <a class="#MAP#BOLD">Sample Text</a>
    </div>
  </div>
  <div class="bbui-forms-fieldset-row">
    <table>
      <tr id="#MAP#PPOINDIVIDUAL_container">
        <td class="#MAP#SHRINKCELL">
          <span id="#MAP#PPOINDIVIDUAL_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr>
        <td>
          <div class="bbui-forms-summarytile-headerlinkcontainer">
            <span id="#MAP#PPOINDIVIDUAL_value"></span>
          </div>
        </td>
      </tr>
      <tr id="#MAP#PPOORGANIZATION_container">
        <td style="width: 300px;">
          <span id="#MAP#PPOORGANIZATION_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr>
        <td>
          <a id="#MAP#ORGLINK_action"><span id="#MAP#PPOORGANIZATION_value"></span></a>
        </td>
      </tr>

      <tr id="#MAP#PPOTEAM_container">
        <td>
          <span id="#MAP#PPOTEAM_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr id="#MAP#PPOTEAM_container">
        <td>
          <a id="#MAP#PROSPECTASSIGNMENT_action"><span id="#MAP#PPOTEAM_value"></span></a>
        </td>
      </tr>
    </table>
  </div>


</div>

Answers

I refuse to go along with the pre-existing ID and CSS names on principle since it is SO bad to do so; AND produced invalid HTML.

Now to answer the question you can use the :has for example

#map-PPOProspectTileViewDataForm:has(#map-PPOINDIVIDUAL_value:empty) a.map-BOLD {
  color: red;
}

#map-PPOProspectTileViewDataForm td {
  padding-top: 0px;
  padding-bottom: 0px;
}

.map-BOLD {
  font-weight: bold;
}

.map-CAPTION {
  padding-right: 5px;
}

#map-LOOKUPID_value {
  width: 80px;
}

#map-STATUS_value {
  width: 55px;
}

#map-MEMBERSHIPLEVELNAME_value {
  width: 180px;
}

.map-DATATABLE {
  border-spacing: 2px 1px;
}

#map-ISPRIMARY_value {
  margin-right: 0px;
}

#map-ISPRIMARY_container,
#map-PRIMARYMEMBERLINK_container {
  padding-left: 0px;
  height: 16px;
}

#map-STATUS_caption {
  padding-left: 7px;
}

#map-PPOProspectTileViewDataForm:has(#map-PPOINDIVIDUAL_value:empty) a.map-BOLD {
  color: red;
}

<div id="map-PPOProspectTileViewDataForm">
  <div class="bbui-forms-fieldset-row">
    <div class="bbui-forms-summarytile-headerlinkcontainer">
      <a class="map-BOLD">Sample Text</a>
    </div>
  </div>
  <div class="bbui-forms-fieldset-row">
    <table>
      <tr id="map-PPOINDIVIDUAL_container">
        <td class="map-SHRINKCELL">
          <span id="map-PPOINDIVIDUAL_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr>
        <td>
          <div class="bbui-forms-summarytile-headerlinkcontainer">
            <span id="map-PPOINDIVIDUAL_value"></span>
          </div>
        </td>
      </tr>
      <tr id="map-PPOORGANIZATION_container">
        <td style="width: 300px;">
          <span id="map-PPOORGANIZATION_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr>
        <td>
          <a id="map-ORGLINK_action"><span id="map-PPOORGANIZATION_value"></span></a>
        </td>
      </tr>

      <tr id="map-garbage-1">
        <td>
          <span id="map-PPOTEAM_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr id="map-garbage-2">
        <td>
          <a id="map-PROSPECTASSIGNMENT_action"><span id="map-PPOTEAM_value"></span></a>
        </td>
      </tr>
    </table>
  </div>
</div>

Using the existing invalid and confusing IDs/classes, you reference the span with getElementById and simply toggle a class on the anchor based on the length of the textContent of the span.

const ppVal = document.getElementById("#MAP#PPOINDIVIDUAL_value");
const headerLink = document.querySelector(".bbui-forms-summarytile-headerlinkcontainer a");
headerLink.classList.toggle("noVal",(ppVal.textContent.length == 0))

##MAP#PPOProspectTileViewDataForm td {
  padding-top: 0px;
  padding-bottom: 0px;
}

.#MAP#BOLD {
  font-weight: bold;
}

.#MAP#CAPTION {
  padding-right: 5px;
}

##MAP#LOOKUPID_value {
  width: 80px;
}

##MAP#STATUS_value {
  width: 55px;
}

##MAP#MEMBERSHIPLEVELNAME_value {
  width: 180px;
}

.#MAP#DATATABLE {
  border-spacing: 2px 1px;
}

##MAP#ISPRIMARY_value {
  margin-right: 0px;
}

##MAP#ISPRIMARY_container,
##MAP#PRIMARYMEMBERLINK_container {
  padding-left: 0px;
  height: 16px;
}

##MAP#STATUS_caption {
  padding-left: 7px;
}

.noVal{
  color: red;
}

<div id="#MAP#PPOProspectTileViewDataForm">
  <div class="bbui-forms-fieldset-row">
    <div class="bbui-forms-summarytile-headerlinkcontainer">
      <a class="#MAP#BOLD">Sample Text</a>
    </div>
  </div>
  <div class="bbui-forms-fieldset-row">
    <table>
      <tr id="#MAP#PPOINDIVIDUAL_container">
        <td class="#MAP#SHRINKCELL">
          <span id="#MAP#PPOINDIVIDUAL_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr>
        <td>
          <div class="bbui-forms-summarytile-headerlinkcontainer">
            <span id="#MAP#PPOINDIVIDUAL_value"></span>
          </div>
        </td>
      </tr>
      <tr id="#MAP#PPOORGANIZATION_container">
        <td style="width: 300px;">
          <span id="#MAP#PPOORGANIZATION_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr>
        <td>
          <a id="#MAP#ORGLINK_action"><span id="#MAP#PPOORGANIZATION_value"></span></a>
        </td>
      </tr>

      <tr id="#MAP#PPOTEAM_container">
        <td>
          <span id="#MAP#PPOTEAM_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr id="#MAP#PPOTEAM_container">
        <td>
          <a id="#MAP#PROSPECTASSIGNMENT_action"><span id="#MAP#PPOTEAM_value"></span></a>
        </td>
      </tr>
    </table>
  </div>


</div>

First of all, I am going to assume that these IDs and class names are replaced with valid values through the UI model…

Second, your example is applying styling if the a with "sample text" itself is empty instead of when the intended span is empty. To achieve what you want, you can use the :has() pseudo-class on the parent element along with the ~ adjacent sibling combinator that matches the parent container of the empty span and then style the id of the a

.bbui-forms-fieldset-row:has(~ .bbui-forms-fieldset-row ##MAP#PPOINDIVIDUAL_value:empty) .#MAP#BOLD

<style type="text/css">##MAP#PPOProspectTileViewDataForm td {
  padding-top: 0px;
  padding-bottom: 0px;
}

.#MAP#BOLD {
  font-weight: bold;
}

.#MAP#CAPTION {
  padding-right: 5px;
}

##MAP#LOOKUPID_value {
  width: 80px;
}

##MAP#STATUS_value {
  width: 55px;
}

##MAP#MEMBERSHIPLEVELNAME_value {
  width: 180px;
}

.#MAP#DATATABLE {
  border-spacing: 2px 1px;
}

##MAP#ISPRIMARY_value {
  margin-right: 0px;
}

##MAP#ISPRIMARY_container,
##MAP#PRIMARYMEMBERLINK_container {
  padding-left: 0px;
  height: 16px;
}

##MAP#STATUS_caption {
  padding-left: 7px;
}

.bbui-forms-fieldset-row:has(~ .bbui-forms-fieldset-row #empty:empty) .#MAP#BOLD {
  color: red;
  outline: 1px solid red;
  display:block
}

</style>

<div id="#MAP#PPOProspectTileViewDataForm">
  <div class="bbui-forms-fieldset-row">
    <div class="bbui-forms-summarytile-headerlinkcontainer">
      <a class="#MAP#BOLD" class="text">Sample Text</a>
    </div>
  </div>
  <div class="bbui-forms-fieldset-row">
    <table>
      <tr id="#MAP#PPOINDIVIDUAL_container">
        <td class="#MAP#SHRINKCELL">
          <span id="#MAP#PPOINDIVIDUAL_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr>
        <td>
          <div class="bbui-forms-summarytile-headerlinkcontainer">
            <span class="empty" id="empty"></span>
          </div>
        </td>
      </tr>
      <tr id="#MAP#PPOORGANIZATION_container">
        <td style="width: 300px;">
          <span id="#MAP#PPOORGANIZATION_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr>
        <td>
          <a id="#MAP#ORGLINK_action"><span id="#MAP#PPOORGANIZATION_value"></span></a>
        </td>
      </tr>

      <tr id="#MAP#PPOTEAM_container">
        <td>
          <span id="#MAP#PPOTEAM_caption" class="bbui-forms-summarytile-caption"></span>
        </td>
      </tr>
      <tr id="#MAP#PPOTEAM_container">
        <td>
          <a id="#MAP#PROSPECTASSIGNMENT_action"><span id="#MAP#PPOTEAM_value"></span></a>
        </td>
      </tr>
    </table>
  </div>


</div>

Please signup or login to give your own answer.

Click here to cancel reply.