0

I am using a a framework which generated very layered css.

I just want to simply give a whole row (or each cell) a background color based on a string cell value (of one column). I don't want to use javascript but pure css.

Below is the html css snippet, where a whole row should get a background color based on <td title="Geen Voorraad"> . The title value has different values, whereby Geen Voorraad should add a background color red. Anyone an solution?

<div class="mx-grid mx-datagrid mx-name-grid2 voorraad" id="mxui_widget_DataGrid_2" data-mendix-id="0_22" data-focusindex="0" widgetid="mxui_widget_DataGrid_2" style="">
  <div class="mx-grid-searchbar" dojoattachpoint="searchNode">
    <div class="mx-grid-search-inputs" dojoattachpoint="searchArgumentNode">
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_8" widgetid="mxui_widget_SearchInput_8">
        <div class="mx-grid-search-label">
          <label>Naam</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField11">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_9" widgetid="mxui_widget_SearchInput_9">
        <div class="mx-grid-search-label">
          <label>Code</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField18">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_10" widgetid="mxui_widget_SearchInput_10">
        <div class="mx-grid-search-label">
          <label>Prijs</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField12">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_11" widgetid="mxui_widget_SearchInput_11">
        <div class="mx-grid-search-label">
          <label>Voorraadstatus</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField1">
          <select class="form-control">
            <option value=""></option>
            <option value="mxui_widget_SearchInput_11_Inactief">Gearchiveerd</option>
            <option value="mxui_widget_SearchInput_11_ActiefVoldoendeVoorraad">Voldoende Voorraad</option>
            <option value="mxui_widget_SearchInput_11_ActiefBeperkteVoorraad">Beperkte Voorraad</option>
            <option value="mxui_widget_SearchInput_11_ActiefGeenVoorraad">Geen Voorraad</option>
            <option value="mxui_widget_SearchInput_11_Verlopen">Verlopen</option>
          </select>
        </div>
      </div>
    </div>
    <div class="mx-grid-search-controls" dojoattachpoint="searchControlNode">
      <button type="button" class="btn mx-button btn-default mx-name-search mx-grid-search-button" id="mxui_widget_Button_12" widgetid="mxui_widget_Button_12"> Zoeken </button>
      <button type="button" class="btn mx-button btn-default mx-name-reset mx-grid-reset-button" id="mxui_widget_Button_13" widgetid="mxui_widget_Button_13"> Wissen </button>
    </div>
    <div class="mx-grid-search-message" dojoattachpoint="messageNode" style="display: none;"></div>
  </div>

  <div class="mx-grid-controlbar" dojoattachpoint="controlNode">
    <div class="mx-grid-toolbar" dojoattachpoint="toolBarNode">
      <button type="button" class="btn mx-button mx-name-newButton2 btn-success" id="mxui_widget_ControlBarButton_10" data-mendix-id="0_17" title="" widgetid="mxui_widget_ControlBarButton_10" data-roving-tabindex="" tabindex="0"> Product toevoegen </button>
      <button type="button" class="btn mx-button mx-name-actionButton3 btn-primary" id="mxui_widget_ControlBarButton_11" data-mendix-id="0_18" title="" widgetid="mxui_widget_ControlBarButton_11" data-roving-tabindex="" tabindex="-1"> Product bewerken </button>
      <button type="button" class="btn mx-button mx-name-actionButton4 btn-danger" id="mxui_widget_ControlBarButton_12" data-mendix-id="0_19" title="" widgetid="mxui_widget_ControlBarButton_12" data-roving-tabindex="" tabindex="-1"> Product verwijderen </button>
      <button type="button" class="btn mx-button mx-name-actionButton5 btn-inverse" id="mxui_widget_ControlBarButton_13" data-mendix-id="0_20" title="" widgetid="mxui_widget_ControlBarButton_13" data-roving-tabindex="" tabindex="-1"> Product archiveren </button>
      <button type="button" class="btn mx-button mx-name-exportToExcelButton2 btn-default" id="mxui_widget_ControlBarButton_14" data-mendix-id="0_21" title="" widgetid="mxui_widget_ControlBarButton_14" data-roving-tabindex="" tabindex="-1"> Naar Excel exporteren </button>
    </div>
    <div class="mx-grid-pagingbar" dojoattachpoint="pagingBarNode" role="navigation" aria-label="Paginering">
      <button type="button" class="btn mx-button mx-name-paging-first" id="mxui_widget_Button_14" aria-label="Ga naar de eerste pagina" widgetid="mxui_widget_Button_14" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-step-backward"></span> </button>
      <button type="button" class="btn mx-button mx-name-paging-previous" id="mxui_widget_Button_15" aria-label="Ga naar de vorige pagina" widgetid="mxui_widget_Button_15" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-backward"></span> </button>
      <div class="dijitInline mx-grid-paging-status" aria-hidden="true">1 tot 2 van 2</div> <span class="sr-only" tabindex="0" data-roving-tabindex="">Huidige weergave 1 tot 2 van 2</span>
      <button type="button" class="btn mx-button mx-name-paging-next" id="mxui_widget_Button_16" aria-label="Ga naar de volgende pagina" widgetid="mxui_widget_Button_16" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-forward"></span> </button>
      <button type="button" class="btn mx-button mx-name-paging-last" id="mxui_widget_Button_17" aria-label="Ga naar de laatste pagina" widgetid="mxui_widget_Button_17" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-step-forward"></span> </button>
    </div>
  </div>

  <div class="mx-grid-content" dojoattachpoint="contentNode" style="height: auto;">
    <table dojoattachpoint="gridTable">
      <caption class="sr-only" dojoattachpoint="gridCaptionNode"></caption>
      <colgroup dojoattachpoint="colGroupNode">
        <col style="width: 20%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
      </colgroup>
      <thead dojoattachpoint="gridHeadNode">
        <tr class="mx-name-head-row">
          <th data-id="57" class="mx-name-column11 mx-left-aligned" title="Naam">
            <div class="mx-datagrid-sort-icon" style=""><span class="mx-datagrid-sort-text">▲</span></div>
            <div class="mx-datagrid-head-caption">Naam</div>
          </th>
          <th data-id="58" class="mx-name-column12 mx-left-aligned" title="Code">
            <div class="mx-datagrid-sort-icon" style="display: none"><span class="mx-datagrid-sort-text"></span></div>
            <div class="mx-datagrid-head-caption">Code</div>
            <div class="mx-datagrid-column-resizer" data-id="62"></div>
          </th>
          <th data-id="59" class="mx-name-column1 mx-right-aligned" title="Prijs">
            <div class="mx-datagrid-sort-icon" style="display: none"><span class="mx-datagrid-sort-text"></span></div>
            <div class="mx-datagrid-head-caption">Prijs</div>
            <div class="mx-datagrid-column-resizer" data-id="63"></div>
          </th>
          <th data-id="60" class="mx-name-column13 mx-right-aligned" title="Voorraad">
            <div class="mx-datagrid-sort-icon" style="display: none"><span class="mx-datagrid-sort-text"></span></div>
            <div class="mx-datagrid-head-caption">Voorraad</div>
            <div class="mx-datagrid-column-resizer" data-id="64"></div>
          </th>
          <th data-id="61" class="mx-name-column20 mx-left-aligned" title="Voorraadstatus">
            <div class="mx-datagrid-sort-icon" style=""><span class="mx-datagrid-sort-text">▼</span></div>
            <div class="mx-datagrid-head-caption">Voorraadstatus</div>
            <div class="mx-datagrid-column-resizer" data-id="65"></div>
          </th>
        </tr>
      </thead>
      <tbody dojoattachpoint="gridBodyNode">
        <tr class="mx-name-index-0 background-red" data-id="72" data-roving-tabindex="" tabindex="0">
          <td data-id="73" class="mx-name-column11 mx-left-aligned" title="2">
            <div class="mx-datagrid-data-wrapper">2</div>
          </td>
          <td data-id="74" class="mx-name-column12 mx-left-aligned" title="2">
            <div class="mx-datagrid-data-wrapper">2</div>
          </td>
          <td data-id="75" class="mx-name-column1 mx-right-aligned" title="0,00">
            <div class="mx-datagrid-data-wrapper">0,00</div>
          </td>
          <td data-id="76" class="mx-name-column13 mx-right-aligned" title="0">
            <div class="mx-datagrid-data-wrapper">0</div>
          </td>
          <td data-id="77" class="mx-name-column20 mx-left-aligned" title="Geen Voorraad">
            <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$Red.png?637183236919148969"></div>
          </td>
        </tr>
        <tr class="mx-name-index-1 background-orange" data-id="78" data-roving-tabindex="" tabindex="-1">
          <td data-id="79" class="mx-name-column11 mx-left-aligned" title="rrew">
            <div class="mx-datagrid-data-wrapper">rrew</div>
          </td>
          <td data-id="80" class="mx-name-column12 mx-left-aligned" title="rere">
            <div class="mx-datagrid-data-wrapper">rere</div>
          </td>
          <td data-id="81" class="mx-name-column1 mx-right-aligned" title="1321,00">
            <div class="mx-datagrid-data-wrapper">1321,00</div>
          </td>
          <td data-id="82" class="mx-name-column13 mx-right-aligned" title="1">
            <div class="mx-datagrid-data-wrapper">1</div>
          </td>
          <td data-id="83" class="mx-name-column20 mx-left-aligned" title="Beperkte Voorraad">
            <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$yellow.png?637183236919148969"></div>
          </td>
        </tr>
      </tbody>
      <tfoot dojoattachpoint="gridFootNode" style="display: none;"></tfoot>
    </table>
  </div>
</div>
Heretic Monkey
  • 10,498
  • 6
  • 45
  • 102
user3394645
  • 65
  • 1
  • 9
  • What you want is not possible with CSS. You cannot go up in the hierarchy – Gerard Feb 26 '20 at 13:40
  • Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Heretic Monkey Feb 26 '20 at 13:41
  • @jsduniya There is no need for a "jsfiddle" for a question about CSS. Stack Snippets work fine. – Heretic Monkey Feb 26 '20 at 13:41
  • No, i have no idea how to write the full css path to apply the selector..you an idea? – user3394645 Feb 26 '20 at 13:42
  • 1
    You can do it with CSS, but it would involve lots of hard coding. For instance, you can use data attributes and CSS attribute selector for styling as per the value in the data attribute. But looking at your table, it seems there are many rows and this is not a good solution for large tables. The best solution would be to use JavaScript as it would keep the code clean and minimal. Example: https://css-tricks.com/almanac/selectors/a/attribute/ – Sumit Surana Feb 26 '20 at 13:43

2 Answers2

0

Is not possible in pure CSS to select an element depending on its content. But in the code you posted you have applied a different class on each row, so -if you could do it dinamically- this would do the trick. Otherwise you'll need a pair of line of javascript...

[update] I've found a (pretty tricky) way to do it; starting from your html code I've added a pseudo element to be used as background for the entire row; this require the TRs to have relative position (thus they must have display property set to a different value than "table-row", in this case I've chosen "flex"). Here's the css code:

.voorraad tr, 
.voorraad tr div 
{
  position: relative;
  overflow: hidden;
}

.voorraad tr div 
{
  z-index:1;
}

.voorraad tr,
.mx-name-head-row
{
  display:flex;
  justify-content:center;
  align-items:center;
}

.voorraad td,
.mx-name-head-row th
{
  flex:1;
  text-align:center;
}

td[title="Geen Voorraad"]:before
{
  content: "";
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:orange;
}

This is not what you would call "clean code", but it do the work.

alessandro davoli
  • 11
  • 2
0

If you can move td with title to the beginning of the line, then you can do so.

td[title="Geen Voorraad"], td[title="Geen Voorraad"] ~ td {
  background-color: red;
}
            <tbody dojoattachpoint="gridBodyNode">
                <tr class="mx-name-index-0 background-red" data-id="72" data-roving-tabindex="" tabindex="0">
                    <td data-id="77" class="mx-name-column20 mx-left-aligned" title="Geen Voorraad">
                        <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$Red.png?637183236919148969"></div>
                    </td>
                    <td data-id="73" class="mx-name-column11 mx-left-aligned" title="2">
                        <div class="mx-datagrid-data-wrapper">2</div>
                    </td>
                    <td data-id="74" class="mx-name-column12 mx-left-aligned" title="2">
                        <div class="mx-datagrid-data-wrapper">2</div>
                    </td>
                    <td data-id="75" class="mx-name-column1 mx-right-aligned" title="0,00">
                        <div class="mx-datagrid-data-wrapper">0,00</div>
                    </td>
                    <td data-id="76" class="mx-name-column13 mx-right-aligned" title="0">
                        <div class="mx-datagrid-data-wrapper">0</div>
                    </td>
                </tr>
                <tr class="mx-name-index-1 background-orange" data-id="78" data-roving-tabindex="" tabindex="-1">
                    <td data-id="79" class="mx-name-column11 mx-left-aligned" title="rrew">
                        <div class="mx-datagrid-data-wrapper">rrew</div>
                    </td>
                    <td data-id="80" class="mx-name-column12 mx-left-aligned" title="rere">
                        <div class="mx-datagrid-data-wrapper">rere</div>
                    </td>
                    <td data-id="81" class="mx-name-column1 mx-right-aligned" title="1321,00">
                        <div class="mx-datagrid-data-wrapper">1321,00</div>
                    </td>
                    <td data-id="82" class="mx-name-column13 mx-right-aligned" title="1">
                        <div class="mx-datagrid-data-wrapper">1</div>
                    </td>
                    <td data-id="83" class="mx-name-column20 mx-left-aligned" title="Beperkte Voorraad">
                        <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$yellow.png?637183236919148969"></div>
                    </td>
                </tr>
            </tbody>
Viktoria
  • 1
  • 1