Zmiana koloru komórki w zależności od wartości

Question

Dzień dobry. Dawno mnie tu nie było ;)

Zmiana koloru komórki w zależności od wartości w czystym HTML+CSS?

Kombinowałem z content ale poległem.

				<tr>
					<td>Y</td>
					<td>Yellow</td>
					<td>Żółty</td>
				</tr>

Z JS wiem:

jsfiddle.net

Answer 1

Nie da się. Nie ma żadnego selektora CSS, który wykrywałby zawartość danego elementu. Da się jedynie wykryć puste elementy.

Answer 2

Jeżeli to nie problem, bo trochę hardcode-m trzeba "pojechać", to sprawdź użycie selektora atrybutu data-* w css-ie.

Przykład

<style>
  table.table_ex2 {
    border-collapse: separate;
    border:1px solid black;
    /*width: 800px;*/
    margin: 0 auto;
    color: black;
  }
  table.table_ex2 th {
    border: 1px solid blue;
    /*padding-left: 5px;*/
    padding: .15rem;
    text-align: center;
  }
  table.table_ex2 th:nth-child(1) { 
    width: 100px;  
  }
  table.table_ex2 th:nth-child(2) { 
    width: 150px;  
  }
  table.table_ex2 th:nth-child(3) { 
    width: 120px;  
  }  
  table.table_ex2 td {
    border: 1px solid black;
    padding: 0 1rem;
    text-align: center;
    white-space: nowrap;
  }
  table.table_ex2 td:first-child,
  table.table_ex2 td:empty {
    border: none;
  }

  table.table_ex2 td[data-background="B"] {
    background-color: black;
    color: white;
  }
  table.table_ex2 td[data-background="W"] {
    background-color: white;
  }
  table.table_ex2 td[data-background="R"] {
    background-color: red;
  }
  table.table_ex2 td[data-background="G"] {
    background-color: green;
    color: white;
  }
  table.table_ex2 td[data-background="L"] {
    background-color: blue;
    color: white;
  }
  table.table_ex2 td[data-background="Y"] {
    background-color: yellow;
  }
  table.table_ex2 td[data-background="LG"] {
    background-color: lightgreen;
  }
  table.table_ex2 td[data-background="BG"] {
    background-color: beige;
  }
  table.table_ex2 td[data-background="BR"] {
    background-color: brown;
    color: white;
  }
  table.table_ex2 td[data-background="OR"],
  table.table_ex2 td[data-background="O"] {
    background-color: orange;
  }
  table.table_ex2 td[data-background="P"] {
    background-color: pink;
  }
  table.table_ex2 td[data-background="PU"],
  table.table_ex2 td[data-background="V"] {
    background-color: purple;
    color: white;
  }
  table.table_ex2 td[data-background="GY"],
  table.table_ex2 td[data-background="GR"] {
    background-color: gray;
    color: white;
  }
  table.table_ex2 td[data-background="SB"] {
    background-color: skyblue;
  }
  table.table_ex2 td[data-background="CH"] {
    background-color: saddlebrown;
    color: white;
  }
  table.table_ex2 td[data-background="DG"] {
    background-color: darkgreen;
    color: white;
  }
  table.table_ex2 td[data-background="L/W"] {
    /*background-image: linear-gradient(to right, blue 50%, white 50%);*/
    --pattern: radial-gradient(closest-side, white, blue) 0/ .25em .25em space;
    --map: 50%/ cover white;
    background: var(--pattern), var(--map);
    background-blend-mode: multiply;
    filter: contrast(10);
    color: white;
    text-shadow: 
      0 0 1px black, 0 0 2px black,
      0 0 3px black, 0 0 4px black;
  }
</style>

<table class="table_ex2">
  <thead>
    <tr>
      <th>Oznaczenie</th>
      <th>Kolor EN</th>
      <th>Kolor PL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-background="B">B</td>
      <td>Black</td>
      <td>Czarny</td>
    </tr>
    <tr>
      <td data-background="W">W</td>
      <td>White</td>
      <td>Biały</td>
    </tr>
    <tr>
      <td data-background="R">R</td>
      <td>Red</td>
      <td>Czerwony</td>
    </tr>
    <tr>
      <td data-background="G">G</td>
      <td>Green</td>
      <td>Zielony</td>
    </tr>
    <tr>
      <td data-background="L">L</td>
      <td>Blue</td>
      <td>Niebieski</td>
    </tr>
    <tr>
      <td data-background="Y">Y</td>
      <td>Yellow</td>
      <td>Żółty</td>
    </tr>
    <tr>
      <td data-background="LG">LG</td>
      <td>Light Green</td>
      <td>Jasno zielony</td>
    </tr>
    <tr>
      <td data-background="BG">BG</td>
      <td>Beige</td>
      <td>Beżowy</td>
    </tr>
    <tr>
      <td data-background="BR">BR</td>
      <td>Brown</td>
      <td>Brązowy</td>
    </tr>
    <tr>
      <td data-background="OR">OR</td>
      <td>Orange</td>
      <td>Pomarańczowy</td>
    </tr>
    <tr>
      <td data-background="O">O</td>
      <td>Orange</td>
      <td>Pomarańczowy</td>
    </tr>
    <tr>
      <td data-background="P">P</td>
      <td>Pink</td>
      <td>Różowy</td>
    </tr>
    <tr>
      <td data-background="PU">PU</td>
      <td>Violet, Purple</td>
      <td>Fioletowy</td>
    </tr>
    <tr>
      <td data-background="V">V</td>
      <td>Violet, Purple</td>
      <td>Fioletowy</td>
    </tr>
    <tr>
      <td data-background="GY">GY</td>
      <td>Gray</td>
      <td>Szary</td>
    </tr>
    <tr>
      <td data-background="GR">GR</td>
      <td>Gray</td>
      <td>Szary</td>
    </tr>
    <tr>
      <td data-background="SB">SB</td>
      <td>Sky Blue</td>
      <td>Błękitny</td>
    </tr>
    <tr>
      <td data-background="CH">CH</td>
      <td>Dark Brown</td>
      <td>Ciemno brązowy</td>
    </tr>
    <tr>
      <td data-background="DG">DG</td>
      <td>Dark Green</td>
      <td>Ciemno zielony</td>
    </tr>
    <tr>
      <td data-background="L/W">L/W</td>
      <td>Blue with White Stripe</td>
      <td>Niebiesko - Biały</td>
    </tr>
  </tbody>
</table>

data-* [ 1 ] [ 2 ]

Comments

Wielkie dzięki :)