CSS Pseudo-Classes and Pseudo-Elements

What is it?

Pseudo-classes select elements based on state or position. Pseudo-elements create virtual sub-elements for styling specific parts of an element.

Why does it matter?

Pseudo-classes and pseudo-elements let you add rich interactive states and decorative effects without extra HTML — custom checkboxes, zebra tables, tooltips, and accessible focus styles.

Learn CSS pseudo-classes (:hover, :focus, :nth-child, :not) and pseudo-elements (::before, ::after, ::placeholder) with UI examples.

Real-World Use Cases

🎨 Custom checkbox styling - ::before on a label creates a visible checkbox while the real input is hidden — fully accessible.
📋 Zebra-stripe tables - :nth-child(even) applies background to every other row — no class needed on each row.
🔍 Form validation feedback - :valid and :invalid style inputs green or red based on HTML5 validation state.
💬 Tooltips without JavaScript - ::after creates a tooltip on :hover — pure CSS, no JS needed.

State Pseudo-Classes

a:link    { color: #6366f1; }
a:visited { color: #7c3aed; }
a:hover   { color: #4f46e5; }
a:focus   { outline: 2px solid #6366f1; outline-offset: 2px; }

input:focus    { border-color: #6366f1; }
input:disabled { opacity: 0.5; cursor: not-allowed; }
input:valid    { border-color: #10b981; }
input:invalid  { border-color: #ef4444; }

li:first-child     { font-weight: bold; }
li:last-child      { border-bottom: none; }
tr:nth-child(even) { background: #f8fafc; }  /* zebra stripe */
:not(.disabled)    { cursor: pointer; }

Pseudo-Elements

/* ::before and ::after — virtual content elements */
.btn::before {
    content: "";  /* required even when empty */
    display: block;
}

/* Decorative arrow after external links */
a[href^="https"]::after { content: " v"; font-size: 0.75em; }

/* Custom placeholder */
input::placeholder { color: #94a3b8; font-style: italic; }

/* Style first line */
p::first-line { font-size: 1.1em; font-weight: 600; }

CSS-Only Tooltip

.tooltip-trigger { position: relative; cursor: help; }

.tooltip-trigger::after {
    content: attr(data-tooltip);
    position:  absolute;
    bottom:    calc(100% + 8px);
    left:      50%;
    transform: translateX(-50%);
    background: #1e293b;
    color:     white;
    padding:   6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity:   0;
    pointer-events: none;
    transition: opacity 200ms;
}
.tooltip-trigger:hover::after { opacity: 1; }

Q: What is the difference between :nth-child and :nth-of-type?

:nth-child(n) counts ALL sibling elements regardless of type. :nth-of-type(n) counts only siblings of the same element type. If a div has h2 followed by three p tags, p:nth-child(2) selects the first p (it is the 2nd child overall), while p:nth-of-type(1) selects the first p counting only p elements.

Quick Access

State Pseudo-Classes

Pseudo-Elements

CSS-Only Tooltip

Related Posts

Comments (0)

Leave a Comment