If you put the content of your td
into a data attribute
like this:
<td data-td-content="Description">Description</td>
You can then use
td[data-td-contents="description"] + td
as a CSS selector. However, this method is very precise to the point that even changing a capital letter will render the rule invalid. It's not really recommended as it also increases the amount of data being processed and passed, ultimately doubling the size of your page. Not an ideal solution.
Another option is to utilize jQuery with the :contains()
selector. You can try the following:
$("td:contains('Description') + td")
This will target the elements that come after the td
containing the specified text value, which you can then manipulate. Here's a snippet example demonstrating its functionality:
$("td:contains('description') + td").addClass('selected')
.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table>
<tr>
<td>title</td>
<td>My Title</td>
</tr>
<tr>
<td>description</td>
<td>My Description</td>
</tr>
</table>
However, please note that you need access to the script for this approach to work. Otherwise, there isn't a direct way to select such elements.
For more information, refer to the documentation: https://api.jquery.com/contains-selector/