CSS Focus unable to affect other elements
===

I've looked around and I can't find the solution for making a title appear when a form is focused. I'm probably missing something glaringly obvious (probably that it can't be done with this selector).

Ideally I'd like to avoid jQuery and stick to CSS (more advanced CSS is fine) as I have no plans to support IE - I like to learn, but IE is too much of a pain to me.

This is my CSS at the moment:

    #search-title {
        color: rgba(0, 0, 0, 0);
        font-size: 20px;
        font-weight: 300;
        margin-left: -30px;
        -webkit-transition: all 200ms;
        -moz-transition: all 200ms;
        -ms-transition: all 200ms;
        -o-transition: all 200ms;
        transition: all 200ms;
    }
    
    input[type="text"]:focus #search-title {
        color: #F70;
        margin-left: 35px;
    }

Thanks in advance,

Sam