Pseudo-classes and pseudo-elements

Pseudo-classes are keywords in CSS used to select specific states of elements, while pseudo-elements allow developers to style specific parts of elements. Both play important roles in CSS3, but their purposes and syntax have distinct differences. Understanding these differences helps achieve more precise control over page styling.

Definition and Common Types of Pseudo-classes

Pseudo-classes begin with a colon (:) and are used to define special states of elements. They do not alter the DOM structure but dynamically apply styles based on user interaction or document state. Common pseudo-classes can be categorized as follows:

User Interaction Pseudo-classes

These pseudo-classes respond to user actions, such as hovering or clicking:

/* Styles for unvisited links */
a:link {
  color: blue;
}

/* Visited link state */
a:visited {
  color: purple;
}

/* Mouse hover state */
button:hover {
  background-color: #f0f0f0;
}

/* Element in focus */
input:focus {
  border-color: #4CAF50;
}

/* Active state (mouse pressed but not released) */
a:active {
  color: red;
}

Structural Pseudo-classes

Select elements based on their position in the DOM tree:

/* Select the first child element */
li:first-child {
  font-weight: bold;
}

/* Select the last child element */
div:last-child {
  border-bottom: none;
}

/* Select the nth child element */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* Select the first element of a specific type */
p:first-of-type {
  text-indent: 2em;
}

Form-related Pseudo-classes

Specifically target form element states:

/* Selected radio button or checkbox */
input:checked {
  outline: 2px solid green;
}

/* Disabled form elements */
input:disabled {
  opacity: 0.5;
}

/* Valid input content */
input:valid {
  border-color: green;
}

/* Required fields */
input:required {
  border-left: 3px solid red;
}

Definition and Use Cases of Pseudo-elements

Pseudo-elements use double colon (::) syntax (recommended by CSS3 specifications, though single colon is still supported). They create virtual elements that do not exist in the DOM. Major pseudo-elements include:

::before and ::after

These pseudo-elements are often used to insert decorative content:

/* Add a quote icon before paragraphs */
p::before {
  content: "“";
  font-size: 2em;
  color: #999;
}

/* Add an external link icon after links */
a[href^="http"]::after {
  content: " ↗";
}

/* Create a tooltip effect */
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
}

::first-letter and ::first-line

Specifically target the first letter or first line of text:

/* Drop-cap effect */
article::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
}

/* Special styling for the first line of a paragraph */
p::first-line {
  font-variant: small-caps;
  color: #666;
}

::selection

Customize text selection styles:

/* Change the background and color of selected text */
::selection {
  background: #ffb7b7;
  color: #000;
}

/* Compatibility for different browsers */
::-moz-selection {
  background: #ffb7b7;
  color: #000;
}

Combining Pseudo-classes and Pseudo-elements

Both can be combined for more complex effects:

/* Show custom tooltip on hover */
.tooltip:hover::after {
  content: attr(data-tip);
  display: block;
  position: absolute;
  background: black;
  color: white;
  padding: 5px;
}

/* First letter of the first list item */
li:first-child::first-letter {
  font-size: 150%;
  color: #8A2BE2;
}

/* Alternate row coloring in tables with markers */
tr:nth-child(even)::before {
  content: "★";
  color: gold;
  margin-right: 5px;
}

Practical Application Examples

Creating Custom Checkboxes

<input type="checkbox" id="custom-check" hidden>
<label for="custom-check" class="checkbox-label"></label>

.checkbox-label {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  position: relative;
  cursor: pointer;
}

#custom-check:checked + .checkbox-label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid green;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

Creating Breadcrumb Navigation

<nav class="breadcrumb">
  <a href="#">Home</a>
  <a href="#">Category</a>
  <a href="#">Current Page</a>
</nav>

.breadcrumb a {
  text-decoration: none;
  color: #666;
}

.breadcrumb a:not(:last-child)::after {
  content: "›";
  margin: 0 8px;
  color: #999;
}

.breadcrumb a:last-child {
  color: #333;
  font-weight: bold;
}

Performance Considerations and Best Practices

While pseudo-classes and pseudo-elements are highly useful, keep the following in mind:

1. Complex selectors may impact rendering performance, especially on mobile devices.
2. The content property for ::before and ::after must be set, even if it's an empty string.
3. Pseudo-elements are inline by default but can be modified with the display property.
4. Some pseudo-classes like :hover behave differently on touch devices.
5. Pseudo-elements cannot have JavaScript events bound to them.

/* Not recommended: complex selector */
div:nth-child(3n+1):hover > p::first-line {
  color: red;
}

/* More efficient selector */
.highlight-line::first-line {
  color: red;
}

Browser Compatibility Solutions

For compatibility with older browsers:

/* Use both single and double colons for compatibility */
.clearfix:after,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* IE8 and below do not support nth-child */
/* Use JavaScript or add class names to specific elements as an alternative */
li.first-item {
  color: red;
}

Creative Application Examples

Gradient Underline Effect

a.fancy-underline {
  position: relative;
  text-decoration: none;
}

a.fancy-underline:hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, red, orange, yellow, green, blue);
}

Custom List Markers

ul.custom-markers {
  list-style: none;
  padding-left: 0;
}

ul.custom-markers li::before {
  content: "▹";
  color: #FF6B6B;
  margin-right: 8px;
}

ul.custom-markers li:nth-child(3n)::before {
  content: "◆";
  color: #4ECDC4;
}

Creating Complex Shapes with Pseudo-elements

Pseudo-elements can avoid the need for extra HTML elements:

.tooltip-box {
  position: relative;
  background: #f8f8f8;
  padding: 15px;
  border-radius: 5px;
}

.tooltip-box::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  border-width: 0 10px 10px;
  border-style: solid;
  border-color: #f8f8f8 transparent;
}

Dynamic Content Generation Techniques

The content property of pseudo-elements can combine CSS variables and attribute values:

<div data-count="5" class="counter"></div>

.counter::before {
  content: "Count: " attr(data-count);
  color: #333;
  font-weight: bold;
}

/* Using CSS counters for automatic numbering */
ol {
  counter-reset: section;
}

li::before {
  counter-increment: section;
  content: counter(section) ". ";
  color: #666;
}