Confused by CSS Pseudo-Class :Active

Confused by CSS pseudo-class :active

There is no concept of "active page" in CSS. In fact, the SitePoint Reference debunks this by saying:

The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.

What the spec says is right: :active simply styles elements that are activated, e.g. clicked (as in the example given) or in some other way triggered such that the browser starts navigating to the link's target.

Note that it doesn't just apply to <a> elements; it may apply to any non-form-input element that's clicked. For instance, you can do this:

p:active {
    color: red;
}

And any paragraph you click will flash its text red.

Note however that the exact definition and implementation is left up to the browser, but in general, you can rely on <a> elements having an activated state.

CSS pseudo-classes :focus and :active not working with the ~ combinator in IE8

:focus for a tags only happens when you use the tab key to get the link you want. :active for a tags is the equivalent of onmousedown.

:touch CSS pseudo-class or something similar?

There is no such thing as :touch in the W3C specifications, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active should work, I would think.

Order on the :active/:hover pseudo class is important for it to function correctly.

Here is a quote from that above link

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

• The :hover pseudo-class applies while the user designates an element
  (with some pointing device), but does
  not activate it. For example, a visual
  user agent could apply this
  pseudo-class when the cursor (mouse
  pointer) hovers over a box generated
  by the element. User agents not
  supporting interactive media do not
  have to support this pseudo-class.
  Some conforming user agents supporting
  interactive media may not be able to
  support this pseudo-class (e.g., a pen
  device).
• The :active pseudo-class applies while an element is being activated by
  the user. For example, between the
  times the user presses the mouse
  button and releases it.
• The :focus pseudo-class applies while an element has the focus
  (accepts keyboard events or other
  forms of text input).

Why does Bootstrap contain both classes and pseudo-classes for focus and active?

If you want to set the active class through script you need an actual class (not a pseudo class). That is the only logical reason I can think of.

You might want to override them, just to be sure. However, I never do that, and I never encountered any problems... So...

Confused by CSS selector

You haven't stated that you have the #slider div selector in your CSS as-well.
This overrides the .current selector because its more specific.

What is the difference between pseudo-classes and pseudo-elements?

From https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

Pseudo-class :

A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify you want to style the selected elements, and only when they are in certain state. For example, you might want to style an element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

Examples:

• :active
• :checked
• :nth-child()
• :first
• :hover

Pseudo-elements ::

Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.

Examples:

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop

As stated by @stephanmg:

In practice ::before is used as :before and ::after is used as :after
because of browser compatibility. Both are pseudo-elements, but may
look like pseudo classes. This might be confusing if you read CSS
code.

---

Related Topics