How to use pure css selector to select hidden element

Question

<td class="col" style="display:none">AAA
      <span prop="1" class=" clear-icon " style=""></span>
</td>

I want to use pure css to hide text "AAA" to show span btn. Is there a way to do it in pure css?

please clarify more about the `style="display:none"`, is that your original HTML code or just your attempt to solve your problem? — King King, May 05 '14 at 20:13
Correct me if I'm wrong, but it sounds like you want _"AAA"_ to be hidden but the `` to show. Is this correct? If so, I don't believe that is possible. As far as I know, a nested/child element cannot be visible if the containing/parent element is hidden. You could try putting _"AAA"_ in a span as well. Then you could hide only the one `` containing the _"AAA"_... — War10ck, May 05 '14 at 20:15
so I have html string generator in the back-end, it decides whether the td element should hide or not. I wanna use pure css to select the hidden element — 9blue, May 05 '14 at 20:16
@War10ck Yes, that's pretty much what I want. It is some legacy code, so I don't want to change the html a lot. wrap text with span requires DOM change. That's why I don't want to do that — 9blue, May 05 '14 at 20:18
@Zen it's still confusing, what is the hidden element you want to mean? the `td` or the text node `AAA`? — King King, May 05 '14 at 20:18
@KingKing by default the entire td is hidden, now I want to hide only text node "AAA" — 9blue, May 05 '14 at 20:20

score 31 · Accepted Answer · answered May 05 '14 at 20:28

31

If your design is not really responsive, I mean you can just need to set fixed font-size for the inner span, I think we have a clean solution like this. The idea is to set font-size of the td to 0, it will hide the text node completely:

.col[style*="display:none"] {
  display:table-cell!important;
  font-size:0;
}
.col > span {
  font-size:20px;
}

Demo.

answered May 05 '14 at 20:28

King King

61,710
16
105
130

1

@War10ck thanks, however it has a limitation with using relative font-size (I also mentioned that in the answer), sometimes fixed/absolute font-size is acceptable. Hope it suits the OP's case. – King King May 05 '14 at 20:38
5

Take into account that this selector will find `display:none`, but **not** `display: none` (with a space). – Andrew May 18 '18 at 22:54
@Andrew yes, that's right. However the answer was given to the specific code of the OP. Also the main idea here is still valuable. The OP should not use inline style like that, he could however declare a `hidden` class and then the `.col[style*="display:none"]` can become `.col.hidden` which should work expectedly (no unintentional exception) – King King May 19 '18 at 15:38
1

Yes, I wasn't criticizing your solution but simply mentioning something to take into account, because yesterday I was scratching my head when the selector wasn't working as I expected. :) – Andrew May 20 '18 at 04:42

Artem Petrosian · Answer 2 · 2014-05-06T09:05:51.610

1

You can use visibility property but this will reserve the space for text "AAA":

.col {    
    visibility:hidden;
}

.clear-icon {
    visibility:visible;
}

Also, if you can't remove display:block !important; from your td tag just add !important rule in CSS

.col {
    display:block !important;
    visibility:hidden;
}

edited May 06 '14 at 09:05

answered May 05 '14 at 20:18

Artem Petrosian

2,964
1
22
30

score 0 · Answer 3 · edited May 07 '22 at 08:39

0

.col {
    visibility:hidden;
}

.col span {
    visibility:visible;
}

<table>
    <td class="col">
        AAA <span>Show Me</span>
    </td>
</table>

edited May 07 '22 at 08:39

Nice18

476
2
12

answered May 05 '14 at 20:22

MilkyTech

1,919
2
15
39

JohanVdR · Answer 4 · 2014-05-05T20:33:26.600

0

http://jsfiddle.net/vLNEp/4/

<table><tr><td class="col"><span class="hidden">AAA</span>
      <span prop="1" class="clear-icon"></span>
</td></tr></table>

.col .hidden {position:absolute;top: -9999px; left: -9999px;}

edited May 05 '14 at 20:33

answered May 05 '14 at 20:22

JohanVdR

2,880
1
15
16

looks like if we have more text (a long text other than just `AAA`), it won't look good like this http://jsfiddle.net/viphalongpro/7bM95/27/ – King King May 05 '14 at 20:26
Updated my answer. It simply wont work even with setting the element to hidden. It will take up space. – JohanVdR May 05 '14 at 20:34
however I think the OP's HTML code is fixed (it's generated by some engine, so he can't edit it, he can just edit the CSS file). So your updated code won't be what the OP can use. – King King May 05 '14 at 20:36

How to use pure css selector to select hidden element

4 Answers4

Demo.

Linked