How to use pure css selector to select hidden element

Question

AAA
      

I want to u

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

see this fiddle

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

.col {
    visibility:hidden;
}
.col span {
    visibility:visible;
}

Answer 3

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 4

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