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

hide first content of class with css

how can I hide FIRST CONTENT text with css but keeping SECOND CONTENT text?

Example:

<div class="class_1">
    FIRST TEXT               
    <div class="class_2">
        SECOND CONTENT
    </div>
</div>
Tags:

4

Answers


  1. 0

    How to can hide only text without child elements?

    If it is truly impossible to separate the "FIRST TEXT" text into a distinct element, then the text itself should be hidden rather than the element.

    In this case, you can play with settings such as font-size, color, line-height, and visibility all of which can assist in displaying the text. Of course, the child element’s settings must still override those of the parent element.

    Example

    .class_1 {
  color: transparent;
  line-height: 0;
}

.class_2 {
  color: black;
  line-height: auto;
}
    <div class="class_1">
  FIRST TEXT               
  <div class="class_2">
    SECOND CONTENT
  </div>
</div>

    In my example, I removed the font color from class_1, which meant that I had to reset the font color for class_2 to black. This left an empty space where "FIRST CONTENT" used to be. To remove the empty space, I had to set the line-height to 0, but then I needed to set the line-height to "auto" (or another appropriate value) in the child element. If it’s important that the element cannot be selected in any way, then you should set the visibility property to "hidden" in the parent element and "visible" in every child element.

    Login or Signup to reply.
  2. 0

    CSS does not support targetting text nodes, only element nodes, so you cannot directly target FIRST TEXT. You can hide class_1 and show class_2:

    .class_1 {
  visibility: hidden;
}
.class_2 {
  visibility: visible;
}
    <div class="class_1">
        FIRST TEXT               
        <div class="class_2">
              SECOND CONTENT
        </div>
</div>

    Note that this has an effect on layout, since visibility just hides the content, but does not remove it. You cannot use display: none on .class_1, because it and its entire subtree is then gone, and display: block on .class_2 will not be considered.

    To be able to target .class_2 by itself, wrap it into an element:

    .class_1 > *:first-child {
  display: none;
}
    <div class="class_1">
        <span>FIRST TEXT</span>
        <div class="class_2">
              SECOND CONTENT
        </div>
</div>

    span would also work in this simple example instead of .class_1 > *:first-child; it is hard to say what would be the best in a non-simplified example.

    Login or Signup to reply.
  3. 0

    Use the visibility property. Then you can collapse the text node while keeping the element node visible:

    .class_1 {
  visibility: collapse;
}

.class_2 {
  visibility: visible;
}
    <div class="class_1">
  FIRST TEXT
  <div class="class_2">
    SECOND CONTENT
  </div>
</div>
    Login or Signup to reply.
  4. 0

    My solution is with setting the font-sizes, like so:

    .class_1 {
  font-size: 0;
}

.class_2 {
  font-size: 16px;
}
    <div class="class_1">
  FIRST TEXT
  <div class="class_2">
    SECOND CONTENT
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search