How to use pure css selector to select hidden element


Tags: css,css3,css-selectors

Problem :

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



Solution :

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.


    CSS Howto..

    How to create a CSS shade effect with a faded sidebar

    How can I get the bottom padding of an input working in IE8?

    how to make the navbar fixed to top

    How should I handle this CSS Inheritance conundrum?

    how to add css for div tag

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    How to do caption hover effect on a background?

    How to change order of elements inside tables?

    How to use Bootstrap CDN?

    Jquery Mobile CSS Android Styling Boarders Not Showing On Button

    How to workaround: IE6 does not support CSS “attribute” selectors

    How to contents of div onclick tab

    How can I automatically change the CSS min-height value of a div when a JavaScript is performed?

    How to base the height of a

    on whether or not its parent div has an image

    GWT- SingleSelectionModel celltable- how to change selected cell's CSS?

    How to align arrows using CSS or jQuery or JavaScript [closed]

    How to modify a WordPress post's markup? [closed]

    How to host html files like css and javascript files

    How to use ­ and the CSS “hyphens” property together?

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How to set width of DIV to span with text inside it (so not fixed)

    How to include css font in Firefox and internet explorer?

    How to apply inverse text mask with CSS

    How to create change image option on mousehover like in gmail account?

    How do I change the color of Semantic UI icons?

    How do I switch external CSS files?

    How to style the tick mark checkbox using css without using images?

    How to fix flexbox position:fixed navbar JS/CSS bug

    How to position div's like this with CSS?

    On a web page how do I display a label that changes to a drop down box on hover