CODEWITHSUNDEEP
css
p.mesotten
p.mesotten

Reputation: 1402

Hide content of parent element without hiding children in CSS

I have the following HTML:

<span class="parent">
    Hello world
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
</span>

Rules of the game:

So the solution would be like setting display:none on a <span> element surrounding the "Hello world" string only. The problem is that there is no such <span> and I cannot create one.

Upvotes: 2

Views: 5444

Answers (2)

Sven Bieder
Sven Bieder

Reputation: 5681

That is not possible. That is like you have a flag in your hand and you expect that when you sit in a closed box, someone can still see the flag in your hand. The only way you can achieve that aim is to take the children out of the parent and attach them somewhere else. And that would be dom-manipulation (javascript).

EDIT: After deeper researches of the technical definition of the visibility property and the wanted behavior I have figured out, that this answer is not correct. jfrej has given the correct answer.

Upvotes: 2

jfrej
jfrej

Reputation: 4648

display:none; always hides children and overrides their display properties.

You can try using visibility instead:

.parent { visibility: hidden;}
.parent a { visibility: visible;}

Upvotes: 12

Related Questions