CSS3: Show/Hide based on node contents [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

CSS 3 content selector?

I couldn't find a way online to hide or show elements based on their contents in CSS. More specifically, in the following example, I'm searching for a CSS3 rule that would allow me to hide all <tr> entries whose second <td> child contains File.

<tr>
    <td>Succeded</td>
    <td>File</td>
    <td>Create</td>
    <td>Left->Right</td>
    <td>\Thunderbird\00sqrcu5.default.archive.7z</td>
</tr>
<tr>
    <td>开发者_运维问答;Succeded</td>
    <td>Folder</td>
    <td>Create</td>
    <td>Left->Right</td>
    <td>\Thunderbird\mab</td>
</tr>
<tr>
    <td>Failed</td>
    <td>File</td>
    <td>Create</td>
    <td>Left->Right</td>
    <td>\Thunderbird\mab\abook.mab</td>
</tr>

Is this even possible? I know that it would be better to add attributes to the <tr> elements, but I'm not sure if an attributes-based solution would support complex rules such as "second child is not 'Folder' and first is 'Failed'".

Ideas?

---

• CSS3 : no
• javascript: yes
• xpath: yes (something like //td[2][contains(text(),'File')]/..)

The xpath works like this:

• //td = select tds anywhere in the document
• [2] = restrict them to those that are the second child
• [contains(text(),'File')] = restrict them to those that have File in their text
• .. = go up one level (to the tr)

You can quickly test your xpath here

---

You can select all of those elements with XPath:

var headings = document.evaluate(
  "//tr[td[2][contains(text(),'File')]]",
  document,
  null,
  XPathResult.ANY_TYPE,
  null
);
while(a = headings.iterateNext()) { console.log(a); }

jsfiddle link

Not with css: Can't backtrack.

Edit:

See Dan's post (below) for an explanation of the pieces. The difference between the two is that I start with the tr element and give it a condition that it must contain a td with "File", whereas Dan's solution starts with the td element, specifies that it must contain "File", then backs up a level to the tr.

Also, he includes a link to a great XPath test page.

---

Try This. You stated

I'm searching for a CSS3 rule that would allow me to hide all entries whose second child contains File.

So I assume it is always the second child

td:nth-child(2)
{
display: none;
}

Working example