title: Why is it impossible to effect child element with focus?
body: <p>I was thinking that there's only two ways to focus element - using JavaScript, or in case it's a <code>div</code> with an <code>contenteditable</code> attribute. But this time I tried something different: I tried to effect <code>input[type="text"]</code> within a div (without <code>contenteditable</code>) using the parent.</p>
  
  <p>I know that when a child element is focused, the parent is focused too - I mean, If I have the following example:</p>
  
  <pre><code>&lt;form action="/" method="get"&gt;
      &lt;input type="text" placeholder="Hi I'm Text!" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I focus on the textbox, the form will be focused too. I can do the following:</p>
  
  <pre><code>form input[type="text"]:focus {
      /* CSS goes here */
  }
  </code></pre>
  
  <p>But <strong>I can not</strong> do something like this:</p>
  
  <pre><code>form:focus &gt; input[type="text"] {
      /* The same CSS goes here */
  }
  </code></pre>
  
  <p>I already solved my own problem, but I wonder why it can not work this way. As I said (and feel free to correct me if I'm wrong) - when I focus on the input, I'm automatically focusing the parent element too (and it's own parent element, etc.) So why can't I simply use <code>:focus</code> on the parent, and then effect the child?</p>