Display another container on input:focus using only css

Question

I want to have some css properties on input:focus so how can I do that? My scenario is; when input get focus I want to show another div so how can I do that using only css?

On hover I can do that using ">" but on focus is not working and I don;t understand why :(.

so this is my code:

<div class="containerTooltipXxx">
 <p class="paragraphClass">
     Some text...<br /><input type="radio" /><br />More text...
     </p><div class="blocks">
<label>Field</label>  <input></input></div>
</div>




  .containerTooltipXxx{
        padding: 20px; 
        position: relative;
        float: left;
        display: inline-block;
        border: 2px solid lime;
        margin: 50px;
    }

    .paragraphClass{display: none;}

.containerTooltipXxx:hover > .paragraphClass, .containerTooltipXxx:focus > .paragraphClass{
        display: block;
        position: absolute;
        top:-5px;
        left: 50px;
        background: red;
        opacity:.9;
    }

very important, the html hierarchy cannot be changed. Thank you.

fiddle

Answer 1

using CSS you can only point to the next sibling elements. Here since the p tag is out of the parent div it is not possible using css.

I know that you don't want to change the HTML order but still I am showing it for example.

Moving p tag inside the div.blocks can do this with only CSS

.blocks input[type="text"]:focus ~ .paragraphClass {
    display: block;
    position: absolute;
    top:-50px;
    left: 50px;
    background: #ccc;
    opacity:.7;
}

DEMO