CSS Pseudo-classes & Pseudo-elements

Interactive Guide with Live Examples

🎯 User Action Pseudo-classes

:hover

Applied when user hovers over an element

Hover over me!
.element:hover { background: #2196f3; color: white; transform: scale(1.05); }

:focus

Applied when an element receives focus

.element:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); }

:active

Applied when an element is being activated (clicked)

.element:active { background: #155724; transform: scale(0.98); }

:visited

Applied to visited links

This link changes color when visited
a:visited { color: #6f42c1; }

🔢 Structural Pseudo-classes

:nth-child(), :first-child, :last-child

Target elements based on their position

1
2
3
4
5
6
.element:nth-child(odd) { background: #ff6b6b; } .element:nth-child(even) { background: #4ecdc4; } .element:first-child { background: #ffd93d; } .element:last-child { background: #a8e6cf; }

:empty

Selects elements with no children

.element:empty::before { content: "This element is empty!"; color: #dc3545; }

📝 Form Pseudo-classes

:disabled

Applied to disabled form elements

.element:disabled { background: #e9ecef; color: #6c757d; cursor: not-allowed; }

:checked

Applied to checked checkboxes and radio buttons

.element:checked { accent-color: #007bff; }

:required, :valid, :invalid

Applied based on form validation state

.element:required { border-color: #dc3545; } .element:valid { border-color: #28a745; } .element:invalid { border-color: #dc3545; }

🎯 Other Pseudo-classes

:target

Applied to the target element of a URL fragment

Target Section 1 Target Section 2
Target Section 1 - Click link above to highlight
Target Section 2 - Click link above to highlight
.element:target { background: #fff3cd; border: 2px solid #ffc107; animation: highlight 1s ease; }

✨ Content Pseudo-elements

::before and ::after

Insert content before or after an element

This text has decorative content added!
.element::before { content: "🎨 "; font-size: 1.5em; } .element::after { content: " ✨"; font-size: 1.5em; }

📝 Text Pseudo-elements

::first-letter

Styles the first letter of an element

This paragraph has a styled first letter. Lorem ipsum dolor sit amet, consectetur adipiscing elit. The first letter is larger and styled differently from the rest of the text.

.element::first-letter { font-size: 3em; font-weight: bold; color: #007bff; float: left; }

::first-line

Styles the first line of an element

This is the first line which will be styled differently. This is the second line and subsequent lines that will have normal styling. The first line pseudo-element only affects the first line of text.

.element::first-line { font-weight: bold; color: #007bff; font-size: 1.2em; }

::selection

Styles the selected text

Select this text to see the custom selection styling! The background and text color will change when you highlight this text.

.element::selection { background: #007bff; color: white; }

📱 Form Pseudo-elements

::placeholder

Styles placeholder text in form fields

.element::placeholder { color: #007bff; font-style: italic; }

📋 Summary

Key Differences

Pseudo-classes (:)

  • Select elements in specific states
  • Use single colon (:)
  • Examples: :hover, :focus, :nth-child()
  • Style existing elements

Pseudo-elements (::)

  • Create virtual elements
  • Use double colon (::)
  • Examples: ::before, ::after, ::first-letter
  • Insert or style parts of content