Search code examples
csshideamp-htmlgoogle-amp

hide element but not nested child with css only

I have something like that in an AMP-Page (I cant change the structure as its given and !important is not possible for AMP):

<p class="test">hide me <a>show me</a></p>

How can I achieve hiding the html of the parent bot not the nested a-tag? I tried this without success:

.test{display:none;}
.test a{display:block;}

and also:

.test:not(a){display:none;}
Solution

  • You can use font-size?

    .test {
  font-size: 0;
}

.test a {
  font-size: 16px;
}
    <p class="test">hide me <a>show me</a></p>