I am looking for a CSS selector for the following table:
Peter | male | 34
Susanne | female | 12
Is there any selector to match all TDs containing "male"?
|
I am looking for a CSS selector for the following table:
Is there any selector to match all TDs containing "male"? |
|||||||||||||||||||||
|
|
If I read the specification correctly, no. You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don't see anything for matching content within an element, though. |
|||||
|
|
Using jQuery:
|
|||||||||||||||||
|
|
Looks like they were thinking about it for the CSS3 spec but it didn't make the cut.
|
|||||||||||||
|
|
There is actually a very conceptual basis for why this hasn't been implemented. It is a combination of basically 3 aspects:
These 3 together mean that by the time you have the text content you cannot ascend back to the containing element, and you cannot style the present text. This is likely significant as descending only allows for a singular tracking of context and SAX style parsing. Ascending or other selectors involving other axes introduce the need for more complex traversal or similar solutions that would greatly complicate the application of CSS to the DOM. |
|||||
|
|
You'd have to add a data attribute to the rows called HTML:
CSS:
|
|||||||||||||||||||||
|
|
I'm afraid this is not possible, because the content is no attribute nor is it accessible via a pseudo class. The full list of CSS3 selectors can be found in the CSS3 specification. |
||||
|
|
|
For those who are looking to do Selenium CSS text selections, this script might be of some use. The trick is to select the parent of the element that you are looking for, and then search for the child that has the text:
This will return the first element if there is more than one since it's always one element, in my case. |
||||
|
|