Contextual Selectors

selector1 selector2 { ...rules... }

Often you'll see this as ways to apply different rules in header, main, and footer

main p {
/* rules for p inside of main */
}
footer p {
/* rules for p inside of main */
}
h2 {
/* rules for h2 everywhere*/
}
section h2 {
/* rules for h2 inside of section */
}
nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
  /* rules for nav links */
}
footer a:link,
footer a:visited,
footer a:hover,
footer a:active {
  /* rules for nav links */
}

Example of "li em" selector

 
 <div>
   <em>Emphasized text   </em>outside of
   <strong>li   </strong>appear "normal".
   <ul>
     <li>
       <em>Emphasized text       </em>within
       <strong>li       </strong>have a different style.
     </li>   </ul>
 </div>

li em { color: red; background-color: navy;}