What distinguishes the selector patterns E * F and E F? Both selectors apply the appropriate style to element F which is a child of element E. Consider the following HTML structure:
<div id= "parent">
<div id="subparent">
<div id="subsubparent">
<input type="text"/>
</div>
</div>
</div>
and the corresponding CSS:
#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;
}
In this example, div[id="parent"] input applies the appropriate style to an input element that is a child of div#parent. Since div#subparent is a child of div#parent, div#subsubparent is a child of div#subparent, and input is a child of div#subsubparent, the input is ultimately a child of div#parent.
When using the selector pattern E * F, E * matches any element that is a child of E, so E * F selects the element F that is a child of E.