Why do we use active in css?

Question

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

Nội dung chính Show

Active links
Active form elements
Specifications
Browser compatibility
Definition and Usage
Browser Support
More Examples
Related Pages
Why Active is used in CSS?
What is the purpose of the active class?
How do you keep active in CSS?
What is difference between focus and active?

Try it

The :active pseudo-class is commonly used on and

Syntax

Examples

Active links

HTML

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

CSS

/* Unvisited links */
a:link {
  color: blue;
}
/* Visited links */
a:visited {
  color: purple;
}
/* Hovered links */
a:hover {
  background: yellow;
}
/* Active links */
a:active {
  color: red;
}

/* Active paragraphs */
p:active {
  background: #eee;
}

Result

Active form elements

HTML

<form>
  <label for="my-button">My button: label>
  <button id="my-button" type="button">Try Clicking Me or My Label!button>
form>

CSS

form :active {
  color: red;
}

form button {
  background: white;
}

Result

Specifications

Specification
HTML Standard # selector-active
Unknown specification # the-active-pseudo

Browser compatibility

BCD tables only load in the browser

Definition and Usage

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

A link becomes active when you click on it.

Tip: The :active selector can be used on all elements, not only links.

Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.

Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!

Version:	CSS1

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
:active	4.0	7.0	2.0	3.1	9.6

CSS Syntax

:active {
css declarations;
}

More Examples

Example

Select and style a

,

and element when you click on it:
p:active, h2:active, a:active {
background-color: yellow;
}
Try it Yourself »
Example

Select and style unvisited, visited, hover, and active links:
/* unvisited link /
a:link {
color: green;
}
/ visited link /
a:visited {
color: green;
}
/ mouse over link /
a:hover {
color: red;
}

/ selected link */
a:active {
color: yellow;
}
Try it Yourself »

Example
Style links with different styles:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Links
CSS tutorial: CSS Pseudo classes

Why Active is used in CSS?

The :active selector is used to select and style the active link. A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links.

What is the purpose of the active class?

Class="active" is usually used to highlight any active content from a selection, mostly in navigation. Let's say in a website with different page links on navigation, just to indicate that the user is on this page, active class highlights that link increasing the usability of navigation.

How do you keep active in CSS?

:active denotes the interaction state (so for a button will be applied during press), :focus may be a better choice here. However, the styling will be lost once another element gains focus.

What is difference between focus and active?

:focus is when an element is able to accept input - the cursor in a input box or a link that has been tabbed to. :active is when an element is being activated by a user - the time between when a user presses a mouse button and then releases it.

programming css Target CSS CSS click event Focus CSS CSS selector :after css Pseudo-class Hover CSS

Why do we use active in css?

Try it

Browser compatibility

See also

Example

Definition and Usage

Browser Support

CSS Syntax

More Examples

Example

Example

Example

Related Pages

Why Active is used in CSS?

What is the purpose of the active class?

How do you keep active in CSS?

What is difference between focus and active?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội