When you’re designing a website, you may want to apply a style to an element when it is being activated by the user. For instance, you may want the color of a button or a link to change when the user clicks on the button or link.
That’s where the CSS :active pseudo-class comes in. The :active pseudo-class allows you to select elements that have been activated by the user, to which you can then apply styles.
This tutorial will discuss, with examples, the basics of CSS pseudo-classes and how you can use the :active pseudo-class in your code. By the end of reading this tutorial, you’ll be an expert at using the :active pseudo-class.
CSS Pseudo-classes
In CSS, selectors are used to select the elements to which a style or set of styles should be applied. For instance, a selector may select all <h1> or <select> tags on a web page, to which a set of styles will then be applied.
Often, when you’re styling a website, you’ll want to apply a style only when an element has entered a special state, such as being clicked by the user or being moused over. That’s where pseudo-classes come in.
Pseudo-classes are keywords added to a selector that allow you to select a particular element when that element exists in a certain state.
For this tutorial, we’re going to focus on the :active pseudo-class.
CSS :active Pseudo-class
The :active pseudo-class allows you to select an element that is being activated by the user. In CSS terms, “activating” means when a user presses down the mouse button and clicks on the element.
The :active pseudo-class is typically used with <a> and <button> elements. For instance, you could use the :active pseudo-class to change the color of a link to red when it is clicked, or to change the background color of a button to light blue when it is clicked.
Once the user has stopped clicking on an element, the element will no longer be “activated”. So, the element will not be selected by the :active selector when the user stops clicking on an element.
CSS :active Examples
Let’s walk through two examples to illustrate how you can use the :active pseudo-class.
Active Links
Suppose we are designing a website for a local card game club, the Wizards of the Boards. We have been tasked with creating an “About” page that includes a link to a web page that lists the card games played by members of the club.
By default, this link should appear in light blue. When this link is clicked, its text color should change to orange. To accomplish this task, we can use the :active pseudo-class. Here’s the code we would use to change the color of our text when a link is clicked:
<html>
<p>Wizards of the Boards is a Philadelphia, PA-based card game club. The club, founded by Michael Johnson and Gabriella Patel in 2004, welcomes players of all card games to come along. The club meets twice each week, on Mondays and Fridays, to discuss the latest in the card games our members play, and to sit down for a few matches of our favorite games.
To learn more about the games we play at Wizards of the Boards, <a href="/games.html">click here</a>.</p>
</html>
<style>
a {
color: lightblue;
}
a:active {
color: orange;
}
</style>Our code returns: Click the 
button in the code editor above to see the output of our HTML/CSS code.
In our HTML file, we have defined a paragraph of text using <p> tags which outlines the history of the Wizards of the Boards card game club. In our <p> tag, we have specified an <a> tag which links to the page “games.html”, and is triggered when the user clicks on the text “click here”.
In our CSS code, we have specified two style rules. First, we have specified a rule that sets the text color of all <a> tags to light blue. Then, we specified a rule using the :active selector that sets the text color of all active <a> tags to orange. In other words, this rule changes the color of a link when a user is clicking on it.
Active Buttons
We have been working on a form for the Wizards of the Boards card game club which allows people to submit their interest to the club.
Toward the end of our form, we want to create a button that says “Submit Your Interest”. When this button is clicked, a 3px-wide orange border should be applied around the button.
We could create this button using the following code:
<html>
<button>Submit Your Interest</button>
</html>
<style>
button:active {
border: 3px solid orange;
}
</style>Our code returns: Click the button in the code editor above to see the output of our HTML/CSS code.
Let’s break down our code. In our HTML file, we have defined a button using the <button> tag. This button contains the text “Submit Your Interest”.
In our CSS style sheet, we have defined one rule that applies to a <button> tag when it is made active by the user. This rule creates a 3px-wide solid border around our button. We use the :active selector to only apply this rule when the button is active.
So, if we click on our button, an orange border will appear, and as soon as we stop clicking on the button, the border will disappear.
Conclusion
The CSS :active pseudo-class allows you to select an element when it is in its “active” state. Once you’ve selected an active element, you can apply a style or set of styles to the element.
The :active pseudo-class is commonly used with <a> tags and <button> tags to create effects that are triggered when a link or a button is clicked, respectively.
This tutorial discussed the basics of CSS pseudo-classes and how to use the :active pseudo-class. Now you’re equipped with the knowledge you need to start using the :active pseudo-class like an expert.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
