html - Change translateY of element on input focus

I'm trying to apply an effect on an element when user focus on input. I've read that I can accomplished that without the use of jQuery by using css selectors (+, ~, >). Well The problem is that the client uses Contact From 7 that renders a lot of code.

Here is the code

    
        
    
    Name

As you can see the "spans" are from contact form 7. I'm trying to translateY the class theLabel by using the css selector "+".

What I've tried so far

the final thought was to be as more detailed I could regarding the classes

span.wpcf7-form-control-wrap.your-name input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.effectForm:focus + .theLabel{
    transform:translateY(-25px);
    }

One thought was to be generic

input:focus + .theLabel

Other thought was to be too generic

input:focus .theLabel

and many more other combinations, all of them failed. I know that I'm doing something wrong. But I can't find what.

Thank you :)