Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

<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

like image 890
gainsky Avatar asked Apr 01 '16 13:04

gainsky


People also ask

Do links need a title?

You should use a link title when you are providing more information about the link. Don't use a link title to provide the information over again, as this is a usability fail that will only result in annoying your users.

How do you give a title in CSS?

The Trick to Title CSS is Simple Using Title CSS, you'd do the following: For any global CSS class, use a capitalized name (title case). For any modifier or descendant class, use a lowercase letter for the beginning of th name.

How do you select an element with a class attribute?

Matches elements with an attr attribute whose value is exactly value or begins with value immediately followed by a hyphen. In the example below you can see these selectors being used. By using li[class] we can match any list item with a class attribute. This matches all of the list items except the first one.


Video Answer


2 Answers

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])')
like image 131
Tushar Avatar answered Oct 01 '22 07:10

Tushar


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

like image 26
Rajaprabhu Aravindasamy Avatar answered Oct 01 '22 09:10

Rajaprabhu Aravindasamy