How to Show a Child Div While Hiding Its Parent Div in CSS?

How to Display a Child Div while Hiding Its Parent Div

Hiding a parent div while maintaining visibility of its child elements can be achieved through CSS manipulation. Here's how:

Step 1: Hide the Parent Div

.Main-Div {
  display: none;
}

This CSS rule hides the parent div with the class "Main-Div."

Step 2: Make the Child Div Visible

.Main-Div > .Inner-Div {
  visibility: visible;
}

This rule targets the child div (".Inner-Div") within the hidden parent div and makes it visible.

Full Example

Combining these rules, the resulting CSS and HTML code is:

.Main-Div {
  display: none;
}

.Main-Div > .Inner-Div {
  visibility: visible;
}

<div class="Main-Div">
  This is some Text..
  This is some Text..
  <div class="Inner-Div">
    <a href="#">
      <img src="/image/pic.jpg" />
    </a>
  </div>
  This is some Text..
  This is some Text..
</div>

By applying this technique, you can selectively display child elements even if their parent div is hidden.

The above is the detailed content of How to Show a Child Div While Hiding Its Parent Div in CSS?. For more information, please follow other related articles on the PHP Chinese website!