0

Eu tenho uma tabela

<table>
  <tr>
    <th>Link</th>
    <th>Descrição</th>
  </tr>
  <tr>
    <td>Fonts para web</td>
    <td><a href="https://fonts.google.com/">Google Fonts</a></td>
  </tr>
  <tr>
    <td>Caracteres especias</td>
    <td><a href="https://unicode-table.com/en/">Unicode Table</a></td>
  </tr>
</table>

Eu gostaria de mudar a cor de fundo de todo <td> que te possui um <a> dentro dele.

td => a{
background-color: yellow;
}
1

1 Resposta 1

2

Tem um hake que pode te ajudar, vc coloca position: relative na td e se tiver um <a> filho direto da td, vai ter um pseudo-elemento que vai cobrir a célula inteira da td e colocar a cor de fundo.

Veja o exemplo, repare que independente da posição do <a> no conteúdo da td a cor vai sempre cobrir a célula inteira.

td {
  position: relative;
  border: 1px solid #000;
}
td > a:first-of-type::before {
  position: absolute;
  z-index: -1;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: tomato;
}
<table>
  <tr>
    <th>Link</th>
    <th>Descrição</th>
  </tr>
  <tr>
    <td>Fonts para web</td>
    <td>
      <a href="https://fonts.google.com/">link</a>
      <a href="https://fonts.google.com/">link1</a>
      <a href="https://fonts.google.com/">link2</a>
      <a href="https://fonts.google.com/">link3</a>
    </td>
  </tr>
  <tr>
    <td>Caracteres especias</td>
    <td>texto qualquer</td>
  </tr>
  <tr>
    <td>Caracteres especias</td>
    <td>
      <span>texto + link</span>
      <br>
      <a href="https://fonts.google.com/">link3</a>
    </td>
  </tr>
</table>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .