CODEWITHSUNDEEP
csshtmlcss-selectors
Flmhdfj
Flmhdfj

Reputation: 918

How to show only the div with id while hiding other divs using CSS only

I was trying to parse from a complicated html page, but someone told me a better way is to inject my own css into that html. So I have the following situation:

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css"  />
</head>

<body>
<div>

   layer one div

    <div id="center">

        layer two div

        <div>

           layer three div

        </div>

    </div>

</div>

</body>
</html>

As you can see the div with id is sandwiched between a parent div and a child div. I wonder if it is possible to hide the parent and child, making the page only show layer two div line. I try doing 

div { display: none; }

div#center { display: inline;}

but without success.

I am using the indent method now, thank you for all the help, guys! : )

Upvotes: 1

Views: 2620

Answers (5)

Alex K
Alex K

Reputation: 15828

You can't hide a parent yet make a child element visible, it just doesn't work that way. I would suggest doing something like this:

<div class="layer-one">

   <span class="layer-one">layer one div</span>

    <div id="center">

        layer two div

        <div>

           layer three div

        </div>

    </div>

</div>

.

div,
span.layer-one {
    display: none;
}

div.layer-one,
div#center {
    display: block;
}

Upvotes: 0

Jason
Jason

Reputation: 1969

Here is kind of a hack, but it works:

HTML

<div>
   layer one div
    <div id="center">
        layer two div
        <div>
           layer three div
        </div>
    </div>
</div>

CSS

div { 
    text-indent: -9999px; 
}

div#center { 
    text-indent: 0px;
}

div#center div {
    display: none;
}

Fiddle: http://jsfiddle.net/fPdda/2/

Upvotes: 1

user3023921
user3023921

Reputation: 1

I don't think that is possible. Hiding the parent div takes precedence on the child, so your child with id is visible but only in the scope of parent div which is hidden. In order to accomplish what you trying to do just wrap the parent text in a span and hide the span;

div span{
 display:hidden;
}
div#center div{
 display:hidden;
}

Upvotes: 0

beejay
beejay

Reputation: 631

This method will not work. Sadly, because your displayed div is inside a hidden div, you're sunk if you're stuck with that markup. You could get fancy and use text-indent: -9999px instead of display: hidden, then text-indent: 0px on the one you want to show, but the negative indented elements will still take up vertical space. Alternately, you could use JS to duplicate the node and re-insert it into the DOM at a different point, maybe inside an element that isn't hidden.

var nodeToShow = document.getElementById('center').cloneNode();
nodeToShow.setAttribute('id', 'centerClone');
document.body.appendChild(nodeToShow);

Upvotes: 0

micropro.cz
micropro.cz

Reputation: 616

As far as I know, there is no option to show element which is placed under hidden element. So CSS will not do the trick. The only possible option is use javascript, which move element which is supposed to be visible out of parent. This can be easily done with jQuery.

However I don't know why you need this and what you mean with word "parse". CSS will affect only what you see, but under "parse" I understand processing data - and for processing is not important how it is shown. Maybe if you specify more detailed what you need, I can help.

Upvotes: 0

Related Questions