A Detailed Explanation of Pseudo-classes in CSS

A Detailed Explanation of Pseudo-classes in CSS

Description
Pseudo-classes are keywords in CSS used to select specific states of an element, such as mouse hover (:hover), focus state (:focus), the first child element (:first-child), and so on. They do not rely on classes or IDs in HTML but dynamically apply styles based on an element's behavior or position within the document tree. Pseudo-classes begin with a colon (:) and are used in combination with selectors to enhance interactivity and style control.

I. Basic Syntax and Classification of Pseudo-classes

Syntax:

selector:pseudo-class {
  property: value;
}

Example:

a:hover {
  color: red;
}

Classification:
Pseudo-classes can be categorized into the following types based on their function:

State-based: Depend on user interaction or element state (e.g., :hover, :active, :checked).
Structural: Based on an element's position within the document (e.g., :first-child, :nth-child()).
Form-related: Target states of form elements (e.g., :valid, :required).
Others: Such as link states (:link, :visited) and more.

II. Detailed Explanation and Examples of Common Pseudo-classes

1. State-based Pseudo-classes

:hover
Function: Triggered when the mouse hovers over an element.
Example:
```
button:hover {
  background-color: #555;
}
```
:active
Function: Takes effect when an element is activated (e.g., mouse pressed but not released).
Example:
```
button:active {
  transform: scale(0.98);
}
```
:focus
Function: When an element gains focus (e.g., an input field is clicked).
Example:
```
input:focus {
  outline: 2px solid blue;
}
```

2. Structural Pseudo-classes

:first-child and :last-child
Function: Select the first or last child element under a parent element.
Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

li:first-child {
  font-weight: bold; /* Only "Item 1" is bold */
}

:nth-child()
Function: Select child elements at specific positions using a formula.
Example:

li:nth-child(2n) { /* Select even items */
  background: #f0f0f0;
}
li:nth-child(3) { /* Select the 3rd li */
  color: red;
}

3. Form-related Pseudo-classes

:checked
Function: Matches selected radio buttons or checkboxes.
Example:
```
input[type="checkbox"]:checked {
  accent-color: green;
}
```

:valid and :invalid
Function: Style based on the validation state of input content.
Example:

input:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}

III. Combining Pseudo-classes and Important Notes

1. Combining Usage

Multiple pseudo-classes can be applied simultaneously, but order matters:

a:link:hover { /* Unvisited link and hovered */
  color: purple;
}

Order Rule: Link-related pseudo-classes should follow the order :link → :visited → :hover → :active (LoVe-HAte mnemonic).

2. Important Notes

Pseudo-classes cannot exist independently; they must be attached to a selector (e.g., div:hover).
Some pseudo-classes only apply to specific elements (e.g., :checked is only for <input>).
Dynamic pseudo-classes (e.g., :hover) are triggered via touch events on mobile devices.

IV. Practical Example: Zebra Striping and Interactive Enhancement for Tables

Goal: Add alternating row colors to a table and highlight the current row on hover.
HTML Structure:

<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

CSS Code:

tr:nth-child(even) {
  background: #f9f9f9; /* Light gray for even rows */
}
tr:hover {
  background: #e0f7fa; /* Light blue on hover */
}

V. The Difference Between Pseudo-classes and Pseudo-elements

Pseudo-classes: Select elements in a specific state (single colon :).
Pseudo-elements: Select specific parts of an element (double colon ::, e.g., ::before).
Example Comparison:

p:first-child { /* Selects the <p> that is the first child */
  color: blue;
}
p::first-line { /* Selects the first line of text in <p> */
  font-weight: bold;
}

Summary: Pseudo-classes are a core tool in CSS for dynamic style control. Understanding their classification and application scenarios can significantly enhance page interactivity and maintainability.