Pseudo-classes, pseudo-elements, and attribute selectors extend the power of CSS selectors by enabling targeted and context-aware styling.
They allow developers to respond to user interactions, style specific parts of elements, and apply rules based on attributes without modifying HTML structure.
Pseudo-classes: Styling Dynamic States
Pseudo-classes target elements based on state, position, or interaction—like hovering, focusing, or being the first child.
They start with a single colon (:) and make your CSS smarter without JavaScript. Use them to create intuitive feedback loops that guide users naturally.
Common Structural Pseudo-classes
These select elements by their position in the DOM tree, perfect for lists and grids.
Practical Example: Navigation List
nav li:nth-child(3) { font-weight: bold; } /* Highlights 3rd menu item */
li:first-of-type { margin-top: 1rem; } /* Extra space on first list item */User Interaction Pseudo-classes
These respond to mouse, keyboard, and focus states—crucial for accessibility.
1. :hover: Styles on mouseover (test on touch devices too).
2. :focus: Active input/button states for keyboard navigation.
3. :active: During click/press (combine with :hover for smooth feedback).
Button Example
.btn {
transition: all 0.2s ease;
}
.btn:hover { transform: scale(1.05); }
.btn:focus { outline: 2px solid #0066cc; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.btn:hover { transform: none; }
}Form and User Input Pseudo-classes
Modern forms come alive with these state selectors.
1. :valid, :invalid: Style valid/invalid inputs automatically.
2. :in-range, :out-of-range: Number/date inputs.
3. :checked: Selected checkboxes/radios.
4. :placeholder-shown: Empty inputs with placeholder text.
Form Styling Example:
input:invalid { border-color: #ff4444; }
input:valid { border-color: #44ff44; }
input:focus:invalid { box-shadow: 0 0 0 2px #ff4444; }Pseudo-elements: Generated Content Magic
Pseudo-elements create virtual elements outside the DOM using :: (double colon). Insert icons, counters, or decorations without extra HTML. They're perfect for subtle enhancements that keep your markup clean.
::before and ::after: Content Insertion
These bookend existing elements with generated content.
Key Rules:
1. Set content: "" (empty string for spacing/shapes).
2. Display as block, inline-block, or inline.
3. Great for icons, quotes, or decorative bullets.
Icon Button Example:
.btn::before {
content: "→";
margin-right: 0.5rem;
font-weight: bold;
}
.notification::after {
content: "(3)";
background: red;
color: white;
border-radius: 50%;
padding: 0 0.25rem;
font-size: 0.75rem;
}::first-line and ::first-letter
Style opening text for articles or quotes—purely presentational.
1.::first-line: First line of text (respects font-size/media queries).
2. ::first-letter: Drop caps or decorative initials.
Blog Post Example:
.article::first-letter {
font-size: 4rem;
float: left;
line-height: 1;
margin: 0.25rem 0.5rem 0 0;
}Advanced Pseudo-elements
Newer additions expand creative possibilities.
Custom List Example:
ul { list-style: none; }
li::marker { content: "⭐ "; }Attribute Selectors: Precision Targeting
Attribute selectors match elements by attribute values, ideal for forms, links, and data-driven sites. They use [attr], [attr=value], and more patterns—no classes needed.
Basic Attribute Selector Syntax
Target by presence, exact match, or patterns.
1. [attr]: Has the attribute.
2. [attr=value]: Exact match.
3. [attr~=value]: Contains word (space-separated).
4. [attr^=value]: Starts with value.
5. [attr$=value]: Ends with value.
6. *[attr=value]**: Contains anywhere.
Link Examples:
/* External links */
a[href^="https://"] { color: blue; }
/* PDF downloads */
a[href$=".pdf"] { font-style: italic; }
/* Images with alt text */
img[alt] { border: 1px solid #ccc; }Attribute Selector Patterns
Pro Tip: Combine with pseudo-classes: input[type="email"]:invalid { border-color: red; }
Best Practices
Combining Selectors for Power
Layer pseudo-classes/elements for complex effects.
Advanced Navigation:
nav a[href="#"]:hover::after {
content: " ↗";
font-size: 0.8em;
}Pitfalls to Avoid:
Performance and Specificity
These selectors have low specificity (like classes), but chains increase it.
1. Test in DevTools Coverage tool.
2. Use sparingly on large lists.
3. Prefer over redundant classes.
Priority Order: Inline > ID > Class > Attribute > Pseudo-class > Element.
Practical Project: Interactive Card Component
Build this card using only these selectors:
<div class="card">
<h3>Project Title</h3>
<p>Amazing project description.</p>
<a href="https://example.com" data-demo="live">View Demo</a>
</div>.card:hover { transform: translateY(-5px); }
.card a[href^="https"]::after { content: "↗"; }