CODEWITHSUNDEEP
csscss-selectors
9blue
9blue

Reputation: 4753

How to use pure css selector to select hidden element

<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?

Upvotes: 20

Views: 45685

Answers (4)

MilkyTech
MilkyTech

Reputation: 1927

.col {
    visibility:hidden;
}

.col span {
    visibility:visible;
}
<table>
    <td class="col">
        AAA <span>Show Me</span>
    </td>
</table>

Upvotes: 0

Artem Petrosian
Artem Petrosian

Reputation: 2954

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

Upvotes: 0

JohanVdR
JohanVdR

Reputation: 2880

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

Upvotes: 0

King King
King King

Reputation: 63317

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.

Upvotes: 31

Related Questions