:active Selector

Details
Written by: Stanko Milosev
Category: CSS
Hits: 5832

...or how to change CSS onClick without javascript. From W3schools:

The :active selector is used to select and style the active link.

The :active selector can be used on all elements, not only links. Here you can read more about CSS's dynamic classes, and here you can see the list of CSS pseudo elements and classes.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<title>Test</title>
		<link rel="stylesheet" type="text/css" href="/index.css">
	</head>

	<body>
		<div id="beAgressive">
			Yo! I am going to be active test!
			<div>
				And I will be under active test!
			</div>
		</div>
		
	</body>

</html>

CSS:

#beAgressive:active {
	color: brown;
	visibility:hidden;
}

#beAgressive>div:active {
	color: red;
	visibility:visible;
}

Notice line #beAgressive>div with ">" sign I said that I want to apply CSS to all divs which are under ID "beAgressive".

Here you can see the example. (click on "And I will be under active test!")