[CSS Selector] E:active
Using 'selector:active', you can apply styles only while the element is being clicked. This is commonly called a "pseudo-class" (the :active pseudo-class). On mobile devices, some models may respond while the screen is being touched, but behavior varies by device, so it is safer to avoid relying on it for mobile.
CSS styles are applied to the target element only while the mouse button is held down, and revert to the original styles when the click is released. The styles are also applied while the element is selected using the Tab key.
Note that other pseudo-classes may override this one, so pay attention to the order in which they are written. Writing them in the order ':link', ':visited', ':hover', ':active' (the "LVHA" order) prevents style conflicts.
Sample Code
div:active { color: red;} /* Makes text red while the div element is being clicked. */
p:active { color: blue;} /* Makes text blue while the p element is being clicked. */
p:active span { color: orange;} /* Makes text orange for child span elements while the p element is being clicked. */
*:active { font-size: 20px;} /* Increases font size for all elements while they are being clicked. */
Browser Result
div:active { color: red;} /* Makes text red while the div element is being clicked. */
p:active { color: blue;} /* Makes text blue while the p element is being clicked. */
p:active span { color: orange;} /* Makes text orange for child span elements while the p element is being clicked. */
*:active { font-size: 20px;} /* Increases font size for all elements while they are being clicked. */
<div>This is a div element.</div> <p>This is a p element.</p> <p>This is a p element.<span>This is a span element inside the p element.</span></p>
Browser Support
Chrome1+ ○
Firefox1+ ○
Safari1+ ○
Edge12+ ○
IE11 ○10 ○9 ○
8 ○7 ○
6 ○
Opera5+ ○
4 and earlier ×
iOS Safari1+ ○
Android Browser4.4+ ○3 and earlier × Chrome AndroidLatest ○ Firefox AndroidLatest ○* Version information is based on MDN.
If you find any errors or copyright issues, please contact us.
シェアする