How to combine nth-child and hover in TailwindCSS?

Question

Is it possible to combine nth-child and hover in tailwind?

<tr key={i} className='[&>*:nth-child(even)]:bg-[white] hover:bg-[#6b7280] [&>*:nth-child(odd)]:bg-[#eee] hover:bg-[#6b7280]'>

This is what i currently have, but now hover does not work, without the even rule, only the odd columns get changed on hover ...

EDIT: new version of the code:

{dataProtokoll.map((k, i) => {
  return (
    <tr key={i} className='[&>*:nth-child(odd)]:bg-[#eee] [&>*:nth-child(even)]:bg-[white] group' onClick={() => { i === selectedRowProtokoll ? setSelectedRowProtokoll(-1) : setSelectedRowProtokoll(i) }}>
      <>
        {Object.values(k).map(value => <td className={clsx('text-left border px-2.5 py-2 border-solid border-[rgb(160_160_160)] group-hover:bg-[#6b7280]', { 'bg-[#6b7280]': i === selectedRowProtokoll })}>{value}</td>)}
      </>
    </tr>
  );
})}

Answer 1

You are applying background-color to the <tr> on hover. The inner elements (presumably <td> elements) have their own background colors. The <td> elements' background colors draw over the <tr> element's background color, so it is never shown. Instead, you could consider changing the background colors of all the <td> elements like:

function App() {
  const i = 0;
  const items = Array(10).fill(null);

  return (
    <table>
      <tr key={i} className='[&>*:nth-child(even)]:bg-[white] [&>*:nth-child(odd)]:bg-[#eee] *:hover:!bg-[#6b7280]'>
        {items.map((_, i) => (
          <td>Cell {i}</td>
        ))}
      </tr>
    </table>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app"></div>

Or:

function App() {
  const i = 0;
  const items = Array(10).fill(null);

  return (
    <table>
      <tr key={i} className='[&>*:nth-child(even)]:bg-[white] [&>*:nth-child(odd)]:bg-[#eee] group'>
        {items.map((_, i) => (
          <td class="group-hover:bg-[#6b7280]">Cell {i}</td>
        ))}
      </tr>
    </table>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app"></div>