How to style all elements that share data attribute values?

Issue

I have a generic table on my hands to which I've added a data attribute index with a value:

<table>
    <tr> <td data-index="1"></td> <td data-index="2"></td> <td data-index="3"></td> <td data-index="4"></td></tr>
    <tr> <td data-index="1"></td> <td data-index="2"></td> <td data-index="3"></td> <td data-index="4"></td></tr>
    <tr> <td data-index="1"></td> <td data-index="2"></td> <td data-index="3"></td> <td data-index="4"></td></tr>
    <tr> <td data-index="1"></td> <td data-index="2"></td> <td data-index="3"></td> <td data-index="4"></td></tr>
</table>

Would it be possible to influence all elements who share the same value of data-index through css?

Something like - CSS:

td[data-index.value]:hover{
    background-color: red;
}

What I want to accomplish is that when I hover over one td element all the other td elements who share the data-index value (example all who are ="1") get styliside. I am trying to accomplish a vertical column highlight.

Sollution that relies on javascript (typescript) and react:

The way I solved it with react and typescript if someone finds this later:

const handleColumnHoverEnter = (e: any) => {
    const allWithAttribute = Array.from(
        document.querySelectorAll("[data-index='" + e.target.dataset.index + "']")
      );
      allWithAttribute.forEach((element:any) => {
        element.style.backgroundColor = 'red';
      });
  }

  const handleColumnHoverLeave = (e: any) => {
    const allWithAttribute = Array.from(
        document.querySelectorAll("[data-index='" + e.target.dataset.index + "']")
      );
      allWithAttribute.forEach((element:any) => {
        element.style.backgroundColor = 'white';
      });
  }

Thanks to users bloodyKnucklese's and t.niese's suggestions!

Solution

Using Javascript to add mouseover and mouseout event handlers on each element. Get the element's dataset data-index value and use that to change the background on all elements having the same value:

document.querySelectorAll("td[data-index]").forEach(di => {
  di.addEventListener("mouseover", (event) => {
    document.querySelectorAll(`td[data-index="${di.dataset.index}"]`).forEach(
      dii => { dii.style.backgroundColor = "#EEEEEE"; }
    );
  });
  di.addEventListener("mouseout", (event) => {
    document.querySelectorAll(`td[data-index="${di.dataset.index}"]`).forEach(
      dii => { dii.style.backgroundColor = "#FFFFFF";  }
    );
  });
});

<table>
    <tr> <td data-index="1">1</td> <td data-index="2">2</td> <td data-index="3">3</td> <td data-index="4">4</td></tr>
    <tr> <td data-index="1">1</td> <td data-index="2">2</td> <td data-index="3">3</td> <td data-index="4">4</td></tr>
    <tr> <td data-index="1">1</td> <td data-index="2">2</td> <td data-index="3">3</td> <td data-index="4">4</td></tr>
    <tr> <td data-index="1">1</td> <td data-index="2">2</td> <td data-index="3">3</td> <td data-index="4">4</td></tr>
</table>

Answered By - bloodyKnuckles