Comment utiliser pur css sélecteur pour sélectionner l'élément masqué

<td class="col" style="display:none">AAA
      <span prop="1" class=" clear-icon " style=""></span>
</td>

Je veux utiliser pur css pour masquer le texte "AAA" pour montrer span btn.
Est-il un moyen de le faire en pure css?

veuillez préciser plus sur le style="display:none", c'est que l'original de votre code HTML ou tout simplement votre tentative pour résoudre votre problème?
Corrigez-moi si je me trompe, mais il semble que vous voulez "AAA" pour être caché, mais le <span> à montrer. Est-ce correct? Si oui, je ne crois pas que c'est possible. Autant que je sache, un imbriquée/enfant de l'élément ne peut pas être visible si le contenant/élément parent est caché. Vous pourriez essayer de mettre des "AAA" dans un span. Ensuite, vous pouvez masquer le seul <span> contenant le "AAA"...
donc, j'ai une chaîne html générateur dans le back-end, il décide si la td élément doit cacher ou pas. Je veux l'utiliser pur css pour sélectionner l'élément masqué
Oui, c'est à peu près ce que je veux. C'est un code existant, donc je ne veux pas modifier le code html d'un lot. habillage de texte avec span nécessite DOM changement. C'est pourquoi je ne veux pas le faire
c'est encore confuse, ce qui est l'élément masqué, vous voulez dire? le td ou le nœud de texte AAA?

OriginalL'auteur 9blue | 2014-05-05

  1. 24

    Si votre design n'est pas vraiment sensible, je veux dire que vous pouvez juste besoin de fixer une taille de police pour l'intérieur span, je pense que nous avons une solution propre de ce genre. L'idée est de définir font-size de la td à 0, il va se cacher le nœud de texte complètement:

    .col[style*="display:none"] {
  display:table-cell!important;
  font-size:0;
}
.col > span {
  font-size:20px;
}

    La démo.

    +1 Très créatif solution.
    merci, il a cependant une limitation à l'utilisation relative de la taille de police (j'ai aussi mentionné que, dans la réponse), parfois fixe/absolue de la taille de police est acceptable. Espérons qu'il convient à l'OP.
    Prendre en compte le fait que ce sélecteur trouverez display:none, mais pas display: none (avec un espace).
    oui, c'est vrai. Cependant, la réponse a été donnée pour le code spécifique de l'OP. Aussi l'idée principale ici est toujours précieux. L'OP ne doit pas utiliser de style en ligne comme ça, il pourrait toutefois déclarer un hidden de la classe et puis les .col[style*="display:none"] peut devenir .col.hidden qui devrait attendre (pas involontaire exception)
    Oui, je n'ai pas de critiquer votre solution, mais simplement de mentionner quelque chose à prendre en compte, parce que hier j'ai été me gratter la tête quand le sélecteur ne fonctionnait pas comme je l'espérais. 🙂

    OriginalL'auteur King King

  2. 1

    Vous pouvez utiliser visibility bien, mais cela permettra de réserver l'espace pour le texte "AAA":

    .col {    
    visibility:hidden;
}

.clear-icon {
    visibility:visible;
}

    Aussi, si vous ne pouvez pas supprimer display:block !important; de votre td balise juste ajouter !important règle CSS

    .col {
    display:block !important;
    visibility:hidden;
}

    OriginalL'auteur Artem Petrosian

  3. 0

    voir ce violon

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

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

    OriginalL'auteur Chris M

  4. 0

    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;}
    ressemble si nous avons plus de texte (un texte long, autres que le seul AAA), il ne sera pas l'air bien comme ça jsfiddle.net/viphalongpro/7bM95/27
    Mise à jour de ma réponse. Il tout simplement pas travailler, même avec le réglage de l'élément caché. Il va prendre de la place.
    cependant, je pense que l'OP du code HTML est fixe (il est généré par un moteur, donc il ne peut pas le modifier, il suffit de modifier le fichier CSS). Donc mise à jour de votre code ne sera pas ce que l'OP pouvez utiliser.
    Votre solution est une bonne idée. Va upvote.
    merci 🙂 bon, mais pas parfait.

    OriginalL'auteur JohanVdR