2 / 4

Demo: Dynamic Pseudo-Classes

Demo HTML Source MoreCSS Source


Example 01: Do something on click.

Example 02: Select text on mouse over.

Example 03: Remove border from focused links in Firefox.

<!-- EXAMPLE 01 -->

<h3>Example 01: Do something on click.</h3>

<p id="borg-link"><a>Click here to get assimilated by the Borg.</a></p>
 
 
<!-- EXAMPLE 02 -->

<h3>Example 02: Select text on mouse over.</h3>

<p><input type="text" id="text-field" value="Move your mouse over this field to select the text …" /></p>
 
 
<!-- EXAMPLE 03 -->

<h3>Example 03: Remove border from focused links in Firefox.</h3>

<p id="firefox-blur-link"><a onclick="alert('Guinan says: Think about usability …')">Click here.</a></p>
/* EXAMPLE 01 */

#borg-link a:active {
	execute: alert("We are the Borg. You will be assimilated. Your biological and technological distinctiveness will be added to our own. Resistance is futile.");
}
 
/* EXAMPLE 02 */

#text-field:hover {
	command: select;
}
 
/* EXAMPLE 03 */

#firefox-blur-link a:focus {
	command: blur;
}

← Documentation