CSS3: Show/Hide based on node contents

Question

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?

Attribute-based solution? What do you mean exactly by that? Can you add the text of the node as an attribute (for example, ``)? — Ry-, May 04 '11 at 19:33
jQuery solution [here](http://stackoverflow.com/questions/1430290/jquery-select-based-on-text). — Emiliano Poggi, May 04 '11 at 20:42

Dan Manastireanu · Answer 1 · 2011-05-04T19:55:50.967

4

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

edited May 04 '11 at 19:55

answered May 04 '11 at 19:50

Dan Manastireanu

1,802
1
15
18

+1: Better explanation of the XPath, plus a better testing link. – theazureshadow May 04 '11 at 20:39

theazureshadow · Accepted Answer · 2011-05-04T22:16:35.117

3

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.

edited May 04 '11 at 22:16

answered May 04 '11 at 19:51

theazureshadow

9,499
5
33
48

I was curious about the performance so I created this [jsPerf](http://jsperf.com/xpath-element-with-second-child-containing-text) test. It seems that your xpath is faster, great job :) – Dan Manastireanu May 04 '11 at 20:03
@Dan: Well, then I got lucky! (I've rarely used XPath besides in some xslt ages ago.) Also, your testing link is cool. – theazureshadow May 04 '11 at 20:38
I almost never use xpath. I prefer jQuery and the like. I already +1'ed you :) – Dan Manastireanu May 04 '11 at 20:46
AAaah, not sure which answer to accept now :) Both great, upvoted both =) – Clément May 04 '11 at 22:05

score -1 · Answer 3 · answered May 04 '11 at 19:44

-1

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

answered May 04 '11 at 19:44

Jawad

8,352
10
40
45

@JAA149 in one case the second child does not have File as content. – jotapdiez May 04 '11 at 19:49
You can't make that kind of assumption. – BoltClock May 04 '11 at 19:53
Change your markup. Add the title attribute with a value of "file" to every td that has the content as file and use attribute selector such as td[title="file"]{display: none;} – Jawad May 04 '11 at 20:04
Or you can try this tr:first-child > td:nth-child(2) { display: none; } tr:last-child > td:nth-child(2) { display: none; } http://jsfiddle.net/XanUS/1/ – Jawad May 04 '11 at 20:30
1

@JAA149: I think you are missing the point, he wants to hide the entire tr (but only if its second child has 'File' in it). – Dan Manastireanu May 04 '11 at 20:48
I think, he wants to hide the td which has the content of file and not the tr. In any case, solutions other than CSS are best here as posted by others. If an only CSS solution required, I can think of only the above. – Jawad May 05 '11 at 08:13

CSS3: Show/Hide based on node contents

3 Answers3