CODEWITHSUNDEEP
css
TheRed__
TheRed__

Reputation: 164

CSS Selector for sibling

How do I select the radio from a list of tr's where the only unique element is 'Some unique value'?

<tr>
  <td>
    <input type="radio" name="myradioname" value="4" onclick="myevent">
  </td>
  <td>
    Some value
  </td>
  <td>Some unique value</td>
</tr>

Upvotes: 0

Views: 65

Answers (1)

Yotam Omer
Yotam Omer

Reputation: 15376

While this cannot be done using pure CSS, it can be achieved using jQuery's :contains selector..

Working jsFiddle

The selector you're looking for is:

$("tr:contains('Some unique value')").find('input[type="radio"]')

First you look for a <tr> that contains 'Some unique value', then you find input[type="radio"] within it.

Works like a charm. In the jsFiddle only the radio near 'Some unique value' gets checked on page load using this selector.

Notes:

  1. There are other ways you can go about it, for e.g finding the <td> that contains 'Some unique value' then looking for the <input> inside its siblings.. However I think the way presented here is most efficient.
  2. If you can select the table first and search only the rows inside it do it, for it will run faster.. e.g: $("#myTable tr:contains('Some unique value')").find('input[type="radio"]').
  3. If you still want to do it using CSS alone I would recommend viewing your server side code and using a conditional statement for adding a class to that specific <tr> for example class="special" then adding a CSS rule like so: .special input[type="radio"]{...}

Upvotes: 3

Related Questions