setting opacity to all <td> except a child in the last <td>

Question

<tbody id="items">
   <tr><td>Item 1</td></tr>
   <tr><td>Item 2</td></tr>
   <tr><td>Item 3</td></tr>
   <tr><td>Item 4</td></tr>
   <tr><td>Item 5</td></tr>
   <tr><td><a>1</a>
           <a>2</a>
           <a class="a3">3</a>
  </td></tr>
</tbody>

I want to set the opacity to 0.5 except the third anchor tag in the last <td>. How to set?

Answer 1

var atd = $('.a3').closest('td')
$("td").not(atd).addClass('opacity')//add class here

You can add a class with the specific css

Demo

Set opacity to child of td except class a3

Demo

Use .each()

Description: Iterate over a jQuery object, executing a function for each matched element.

To find match then add the class

Demo

var atd = $('.a3')
$("td").each(function(index) {
console.log($(this).find('a').length)
  if ($(this).find('a').length > 0) {
    $(this).children().not(atd).addClass('opacity') //add class here
  } else {
    $(this).addClass('opacity') //add class here
  }
})

.opacity {
  color: red;
  opacity: .5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="items">
    <tr>
      <td>Item 1</td>
    </tr>
    <tr>
      <td>Item 2</td>
    </tr>
    <tr>
      <td>Item 3</td>
    </tr>
    <tr>
      <td>Item 4</td>
    </tr>
    <tr>
      <td>Item 5</td>
    </tr>
    <tr>
      <td><a>1</a>
        <a>2</a>
        <a class="a3">3</a>
      </td>
    </tr>

</table>

Answer 2

If the opacity of a td is 0.5, you can't "undo" that in a child component (give it an opacity of 1 again).

You can also not select "td that doesn't contain a" in CSS.

What I would do is to wrap the contents of the cells in a <span>, and do the following:

td span, td a {opacity: 0.5;}
.a3 {opacity: 0.1;}

Answer 3

Well may be a little lengthy but a great css only solution

HTML

<table>
  <tbody id="items">
    <tr>
      <td>Item 1</td>
    </tr>
    <tr>
      <td>Item 2</td>
    </tr>
    <tr>
      <td>Item 3</td>
    </tr>
    <tr>
      <td>Item 4</td>
    </tr>
    <tr>
      <td>Item 5</td>
    </tr>
    <tr>
      <td><a>1</a>
        <a>2</a>
        <a class="a3">3</a>
      </td>
    </tr>
  </tbody>
</table>

CSS

tr td,
tr:last-child td a {
  opacity: .5
}

tr:last-child td,
tr:last-child td a.a3 {
  opacity: 1
}

Set last child opacity to 1 and opacity of <a> in last list to 0.5 but not for the last <a>

Working example : https://jsfiddle.net/4p3dfqye/