How to select an element based on content

Asked

Viewed 33 times

0

I have a table

<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>

I’d like to change the background color at all <td> who possesses you a <a> within it.

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

  • Important you [Dit] your question and explain objectively and punctually the difficulty found, accompanied by a [mcve] of the problem and attempt to solve. To better enjoy the site, understand and avoid closures and negativities worth reading the Stack Overflow Survival Guide in English.

1 answer

2


There is a Hake that can help you, you put position: relative in td and if you have a <a> direct son of td, will have a pseudo-element that will cover the entire cell of td and put the background color.

See the example, note that regardless of the position of the <a> in the content of td the color will always cover the whole cell.

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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.