title: CSS selector for elements having focus outline in Chrome
body: <p>If you navigate page by TAB in Chrome it indicates focus on elements by adding an outline. The problem is that the outline is drawn outside, so I need to apply <em>z-index</em> to such outlined elements, so that the outline does not get hidden by elements with higher <em>z-index</em> than that of the focused element.</p>
  
  <p>I've tried the <code>:focus</code> selector, but it seems that an element can be focused in Chrome yet have no outline (e.g. if you click it with mouse). What is then the valid selector to apply a style to all outlined and only the outlined elements?</p>
  
  <p>EDIT: What I mean by a focus without an outline is like in the following example:</p>
  
  <pre><code>&lt;style&gt; a:focus{color:red} &lt;/style&gt;
  &lt;a href="#"&gt;abc&lt;/a&gt;&lt;br&gt;
  &lt;a href="#"&gt;def&lt;/a&gt;
  </code></pre>
  
  <p>When you TAB over such links, they got both styled by the :focus rule and outlined, yet when you click them with mouse the style is applied but the element is not outlined by the browser.</p>