Add CSS class to only those links that do not have 'title' attribute

Question

<table>
    <tr>
        <td><a href src="xxx" title="Some text">Link</a></td>
        <td><a href src="xxx" title="">Link</a></td>
    </tr>
    <tr>
        <td><a href src="xxx" title="Some text">Link</a></td>
        <td><a href src="xxx" title="Some text">Link</a></td>
    </tr>
</table>

I want to add some CSS class to

<td><a href src="xxx" title="">Link</a></td>

How can I make this with jQuery or JavaScript

Answer 1

No need of using jQuery to add a CSS class. You can use attribute-value selector in CSS.

a[title=""] {
    color: red;
}

To add class by using jQuery other than just styling purpose

$('a[title=""]').addClass('someClass');

---

To select elements which do not have title attribute

a:not([title]) {
    color: red;
}

Same selector can be use in jQuery.

$('a:not([title])')

Answer 2

How can I make this with jQuery or JS

You can do it with attribute equals selector,

$("table > tbody > tr > td > a[title='']").addClass("something");

Also note that you have an invalid html, tbody should be the immediate child of a table element.

<table>
  <tbody> <!-- note the tbody here -->
    <tr>
      <td><a href src="xxx" title="Some text">Link</a></td>
      <td><a href src="xxx" title="">Link</a></td>
    </tr>
    <tr>
      <td><a href src="xxx" title="Some text">Link</a></td>
      <td><a href src="xxx" title="Some text">Link</a></td>
    </tr>
  </tbody>
</table>

DEMO