CSS Pseudo-Classes

Introduction

CSS pseudo-classes are pretty useful and they let a developer style some element depending on the state or condition that is given. In this complete leakage, we are going to learn about CSS pseudo-classes, how do they work and few live examples to realize what CSS pseudo-classes can do in terms of interactivity and styling in web development.

What are CSS Pseudo-Classes?

Pseudo classes are keywords that define a special condition of the targeted elements. They are used to style elements that do not fit a simple document tree organization of structure like, mouse over a link, click a button, or typing into a form input box.

Basic Syntax

Pseudo-classes are written with a colon (:) followed by the name of the pseudo-class.

selector:pseudo-class {
  property: value;
}

Commonly Used Pseudo-Classes

1. :hover

The :hover pseudo-class is used to apply styles when an element is hovered over by the cursor.

button:hover {
  background-color: #3498db;
  color: #fff;
}

2. :active

The :active pseudo-class applies styles to an element when it is being activated by the user, typically when clicking on it.

.button:active {
  transform: translateY(1px);
}

3. :focus

The :focus pseudo-class applies styles to an element when it gains focus, such as when it is clicked or tabbed into.

input:focus {
  border-color: #27ae60;
  box-shadow: 0 0 5px rgba(39, 174, 96, 0.5);
}

4. :first-child and :last-child

These pseudo-classes target the first and last child elements of a parent respectively.

ul li:first-child {
  font-weight: bold;
}

ul li:last-child {
  color: #e74c3c;
}

5. :nth-child(n)

The :nth-child(n) pseudo-class allows you to select elements based on their position in a group of siblings.

ul li:nth-child(odd) {
  background-color: #f2f2f2;
}

ul li:nth-child(even) {
  background-color: #e9e9e9;
}

Dynamic Styling and User Interaction

CSS pseudo-classes play a crucial role in enhancing user experience by providing dynamic styling based on user interaction.

Example: Styling Links

a:link {
  color: #2980b9; /* unvisited link */
}

a:visited {
  color: #8e44ad; /* visited link */
}

a:hover {
  color: #c0392b; /* mouse over link */
}

a:active {
  color: #e67e22; /* selected link */
}

Conclusion

The CSS pseudo-classes play a crucial role in today’s website design for better and more effective client-interaction. With help of pseudo-classes, one can successfully apply such styles that would modify in response to users’ actions, and, thus, improve the usability of Web pages. Explore new possibilities of styling and interacting with your web content by applying various pseudo-classes.

Frequently Asked Questions