Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to combine nth-child and hover in TailwindCSS?

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>
  );
})}
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Just use these classes first:style , second:, odd:, even:, last: you can use it in every child class no matter the index they will be applied to the specific div

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search