CSS Pseudo Class Selector

In standard CSS, you target elements based on their names, IDs, or classes. However, sometimes you need to style an element based on information that isn't strictly in the HTML code—such as whether a user is hovering over a button, if a link has been clicked, or if an input field is currently active. This is where Pseudo-class selectors come in.

A pseudo-class is a keyword added to a selector that specifies a special state of the selected element. They allow you to create dynamic, interactive user interfaces without needing to write complex JavaScript for simple visual changes.

The syntax for pseudo-classes uses a single colon (:) between the selector and the pseudo-class keyword:

selector:pseudo-class {
  property: value;
}

Here are some common pseudo-classes and their uses in modern web development:

• :hover: Applies when the user moves their mouse over an element. This is the most common way to provide visual feedback for buttons and links.
• :focus: Applies when an element (like an input field or a button) is selected via the keyboard or a mouse click. This is critical for accessibility.
• :active: Applies during the exact moment an element is being clicked or activated. It provides an immediate "pressed" sensation.
• :visited and :link: Used specifically for navigation. :link targets unvisited URLs, while :visited styles links the user has already seen.
• :first-child: A structural pseudo-class that targets an element only if it is the very first sibling inside its parent container.
• :lang(): Selects elements based on the lang attribute, which is useful for applying specific fonts or styles to different languages (e.g., Japanese vs. English text).

Practical Example: Interactive Links

A classic real-world use case is making a navigation menu feel responsive. By using :hover, you give the user a clear signal that an item is clickable.

CSS

/* The base state of the link */
a {
  color: black;
  transition: color 0.3s ease;
}

/* The state when the mouse is over the link */
a:hover {
  color: blue;
  text-decoration: underline;
}

Combining Pseudo-Classes with Other Selectors

Pseudo-classes are incredibly powerful because they can be combined with class selectors, IDs, or even other pseudo-classes to increase specificity. For instance, you might want to style only a specific "Call to Action" button differently when it is hovered:

CSS

/* Only affects  tags with the class "highlight" */
a.highlight:hover {
  background-color: yellow;
  color: red;
  font-weight: bold;
}

input:focus {
  border: 2px solid #4A90E2;
  outline: none;
  background-color: #f0f7ff;
}