What's the Difference Between CSS Pseudo-Classes and Pseudo-Elements?

Difference between CSS Pseudo-Classes and Pseudo-Elements

Overview

CSS pseudo-classes and pseudo-elements are both used to enhance selector specificity, but they serve distinct roles in styling.

Pseudo-Classes

Pseudo-classes are used to target elements based on their state or behavior. They begin with a colon (:) followed by a keyword or value in parentheses. Pseudo-classes can include information that cannot be derived from the document structure, such as:

• :hover - On hover
• :active - When clicked
• :target - Element with a specific ID matching the hash in the URL

Pseudo-Elements

Pseudo-elements create virtual elements that are not present in the document, but can be styled and manipulated. They begin with double colons (::) followed by a keyword. Pseudo-elements provide access to content and features otherwise unavailable, such as:

• ::first-line - First line of text
• ::before - Content inserted before an element
• ::after - Content inserted after an element

Key Differences

Example Usage

To apply a background color to elements with a class of "important" when hovered over:

.important:hover {
  background-color: #FF0000;
}

To add a language tag after quotes on the page:

q::after {
  content: " (Language: " attr(lang) ")";
}

Summary

Pseudo-classes are used for selecting elements based on their context or behavior, while pseudo-elements create virtual elements with accessible content and styling options. Understanding this distinction is essential for effective use of these advanced CSS techniques.

The above is the detailed content of What's the Difference Between CSS Pseudo-Classes and Pseudo-Elements?. For more information, please follow other related articles on the PHP Chinese website!