title: Apply hover style to any child but not parent
body: <p>I am building a tool that requires the user to click/select an element on the page. The page content/structure/css is not known.</p>
  
  <p>I am using javascript mouse enter/leave events to add/remove an outline class to the element and show the user what they are selecting. However, the events are unreliable and the outlined element not always the one that is clicked.</p>
  
  <p>Adding the style with <code>:hover</code> css is much faster and more reliable.</p>
  
  <p>Is there a way to outline any hovered elements, but none of its parents?</p>
  
  <p>One way is to do:</p>
  
  <p><code>*:hover { outline: 1px solid green; }</code></p>
  
  <p>Example: <a href="http://codepen.io/anon/pen/xGvXbm" rel="nofollow">http://codepen.io/anon/pen/xGvXbm</a></p>
  
  <p>But this will outline every parent of the element. </p>
  
  <p>Is there a way to exclude parents from this selector? </p>