CSS3: show / hide based on node content

Question

Possible duplicate:
CSS 3 content selector?

I could not find a way online to hide or show elements based on their content in CSS. More specifically, in the following example, I am looking for a CSS3 rule that will allow me to hide all <tr> entries, the second child element of <td> 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 it possible? I know that it would be better to add attributes to the <tr> elements, but I am not sure that the attribute-based solution will support complex rules such as "the second child is not a" folder "and first" crashes ",.

Ideas?

Answer 1

You can select all of these 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 back off.

Edit:

See Dan's post (below) for an explanation of the parts. The difference between the two is that I start with the tr element and give it the condition that it must contain td with "File" , while Dan's solution starts with td , it indicates that it should contain "File" , then raise the level to tr .

It also includes a link to the excellent XPath test page .

Answer 2

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

xpath works as follows:

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

You can quickly check your xpath here

Answer 3

Try it. You stated

I am looking for a CSS3 rule that will allow me to hide all records whose second child file has a file.

So I guess it's always the second child

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

Working example