I have a document where an element of class A is inside an element of class B. For example:
<body>
<div class="B">
This is text of class B.
<div class="A">
This is text of class A.
</div>
</div>
</body>
I want to hide the text of class B, but show the text of class A. How to write a CSS to do this?
I tried:
.B {
display: none;
}
.A {
display: inline;
}
But it hides A (not surprising: it’s inside B which is not displayed).
I also tried:
.B {
visibility: hidden;
}
.A {
visibility: visible;
}
It hides B, but it leaves the empty space in place of B. That is not what I want. I want to hide it completely. How to do this?
>Solution :
Paulie_D’s comment of setting the font-size works. Set "B" to zero and "A" to initial.
.A {
font-size: initial;
}
.B {
font-size: 0;
} <div class="B">
This is text of class B.
<div class="A">
This is text of class A.
</div>
</div>