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