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?

Answer 1

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.

Answer 2

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;
}

Answer 3

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;}

Answer 4

.col {
    visibility:hidden;
}

.col span {
    visibility:visible;
}

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