how to make a child div visible when clicking its parent div in pure css

css

Solution

The reason your CSS is not working is due to two small errors.

First, `.head.hover` is defining two Class selectors `.head` and `.hover` whereas you really want the `:hover` user action pseudo class.

Second, `.head.hover ~ .tip` is using the `~` general sibling combinator which will only apply to an element with `.head.hover` that is preceded by an element with `.tip`, i.e. the elements must "share the same parent in the document tree". You can use either the descendent combinator or child combinator to target the `.tip` child. I have used the latter in the following example:

So fixing these problems results in the CSS:

.head:hover > .tip {
    color: red;
}

.tip {
    color: black;
}

which changes the tip colour on hover.

Regarding CSS click events, there are many different ways to achieve CSS click events as discussed on the blog you linked to.

One that might work for your situation is the `:focus` approach, which relies on the element having a `tabindex`.

HTML

<div class="head" tabindex="1"> 
   <div class="content">  content </div>
   <div class="tip">  tip </div>
</div>

CSS

.head .tip {
    display:none;
}

.head:focus .tip {
    display:block;
}

See demo

Problem

I have a html structure, usually the div with 'content class' is visible to the user while the div with 'content tip' is visible until the user is click or hover over the div of 'class head'. ``` <div class='head'> <div class='content'> content </div> <!- visible --> <div class='tip'> tip </div> <!- invisible --> </div> ``` Of course, I can use the code to make the 'class tip' to show when I click the parent element. However, I am just curious is it possible to do it with pure css. I find a css technique on the web ``` .to-be-changed { color: black; } input[type=checkbox]:checked ~ .to-be-changed { color: red; } ``` the demo works, but it works with input element and check event, how to do when it comes to div element i also tried this ``` .head.hover ~ .tip { color: red; } .tip { color: black; } ``` but doesn't work for some reason

Original source