title: Parent element in css
body: <p>What's a difference in selector's pattern <code>E * F</code> and <code>E F</code>? Both <code>E * F</code> and <code>E F</code> applying appropriate style to <code>F</code> which is child of <code>E</code>. Consider HTML:</p>
  
  <pre><code>&lt;div id= "parent"&gt;
      &lt;div id="subparent"&gt;
          &lt;div id="subsubparent"&gt;
              &lt;input type="text"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and corresponding css</p>
  
  <pre><code>#parent, #subparent{
      padding:20px;
      background:green;
      width: 400px;
      height: 400px;
  }
  #subparent{
      background:black;
      height:200px;
      width:200px;
  }
  #subsubparent{
      background: blue;
      width:100px;
      height:100px;
  }
  div[id="parent"] input{
      width:50px;
  
  }
  </code></pre>
  
  <p>Where <code>div[id="parent"] input</code> applying appropriate style to input which is child of <code>div#parent</code>. I my case <code>div#subparent</code> is child of <code>div#parent</code>, <code>div#subsubparent</code> is child of <code>div#subparent</code> and <code>input</code> is child of <code>div#subsubparent</code>. Hence <code>input</code> is child of <code>div#parent</code>.</p>
  
  <p>In the case of <code>E * F</code>. <code>E *</code> matches any element which child of <code>E</code> and hence <code>E * F</code> mathces <code>F</code> element which child of <code>E</code>.</p>