Question 200534 in CSS Question posted in
Some basic documentation can be found here.

Css – How to hide a text of outside element, but make a text of inside element visible

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?

Tags:

3

Answers


  1. 0

    you can try some JavaScript methods

     var elementA = document.querySelector('.A');
document.write(elementA.textContent.trim())
     .B {
    display: none;
  }
    <body>
  <div class="B">
    This is text of class B.
    <div class="A">
      This is text of class A.
    </div>  
  </div>
</body>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    You can try to sort this by class, see below example.

     .B-content {
    display: none;
  }


    
<body>
  <div class="B">
    <div class="B-content">
      This is text of class B.
    </div>
    <div class="A">
      This is text of class A.
    </div>
  </div>
</body>

    Simplicity is the best 😎

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search