StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><code>:focus</code> and <code>:active</code> are two different states.</p> <p><code>:focus</code> represents the state when the element is currently selected to receive input and <code>:active</code> represents the state when the element is currently being activated by the user.</p> <p>For example let's say we have a <code><button></code>. The <code><button></code> will not have any state to begin with. It just exists. If we use <kbd>Tab</kbd> to give "focus" to the <code><button></code>, it now enters its <code>:focus</code> state. If you then click (or press <kbd>space</kbd>), you then make the button enter its (<code>:active</code>) state.</p> <p>On that note, when you click on an element, you give it focus, which also cultivates the illusion that <code>:focus</code> and <code>:active</code> are the same. <strong>They are not the same.</strong> When clicked the button is in <code>:focus:active</code> state.</p> <p>An example: <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><style type="text/css"> button { font-weight: normal; color: black; } button:focus { color: red; } button:active { font-weight: bold; } </style> <button> When clicked, my text turns red AND bold!<br /> But not when focused, where my text just turns red </button></code></pre> </div> </div> </p> <p>edit: <a href="http://jsfiddle.net/NCwvj/" rel="noreferrer" title="jsfiddle">jsfiddle</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload