Pseudo Classes in CSS Language

CSS (Cascading Style Sheets) is a fundamental language for web development, allowing developers to control the presentation and styling

of web pages. One powerful feature of CSS is the use of pseudo-classes. Pseudo-classes are keywords that can be added to selectors to define a specific state or relationship of an HTML element. In this article, we’ll dive into the world of pseudo-classes and provide examples of how they can be used to enhance your web designs.

What Are Pseudo-Classes?

Pseudo-classes are used to target elements based on their dynamic state or relationship with other elements. They allow you to apply styles to elements in response to user actions or other conditions. Pseudo-classes are preceded by a colon (“:”) and are added to selectors.

Here are some common pseudo-classes:

1. :hover: This pseudo-class is used to style an element when the mouse pointer is over it. It’s commonly used for creating interactive effects like changing the color of a link when you hover over it.

   a:hover {
       color: red;
   }

2. :active: This pseudo-class targets an element that is being activated by the user, typically when a mouse button is pressed. It’s often used to create a visual indication that a button is being clicked.

   button:active {
       background-color: #007bff;
   }

3. :nth-child(): This pseudo-class allows you to select elements based on their position within a parent element. You can specify patterns like odd or even elements.

   li:nth-child(odd) {
       background-color: lightgray;
   }

4. :first-child and :last-child: These pseudo-classes target the first and last child elements of a parent. They are handy for styling the first or last item in a list, for example.

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

5. :not(): This pseudo-class is used to select elements that do not match a given selector. It’s useful for excluding specific elements from a style rule.

   p:not(.important) {
       opacity: 0.5;
   }

6. :focus: This pseudo-class targets elements that currently have focus, such as input fields, buttons, or links. It’s commonly used to improve accessibility by highlighting the currently focused element.

   input:focus {
       border: 2px solid #ff6600;
   }

Practical Examples

Let’s explore some practical examples of how pseudo-classes can be used in real web development scenarios.

Example 1: Creating a Hover Effect

button:hover {
    background-color: #ff9900;
    color: white;
}

In this example, when a user hovers over a button element, the background color changes to orange, and the text color becomes white.

Example 2: Styling Odd-Numbered Table Rows

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

This code applies a light gray background to all odd-numbered rows in a table, improving readability.

Example 3: Highlighting Invalid Form Fields

input:invalid {
    border: 2px solid red;
}

When a user submits a form with invalid input, this code will give the invalid input fields a red border to indicate the error.