Advanced Selectors

Pseudo-classes, pseudo-elements, combinators, and selector specificity.

Overview

Advanced selectors target elements precisely.

Key Concepts

• Pseudo-classes — Element states and positions
• Pseudo-elements — Style specific parts
• Combinators — Relationship selectors
• Specificity — Priority rules
• :has() — Parent selector

Code Examples

/* Pseudo-classes */
.link:hover { color: var(--primary); }
.link:active { transform: scale(0.98); }
.link:focus-visible { outline: 2px solid var(--primary); }

.input:invalid { border-color: var(--danger); }
.input:valid { border-color: var(--success); }
.input:placeholder-shown { opacity: 0.5; }

.list-item:first-child { border-radius: 8px 8px 0 0; }
.list-item:last-child { border-radius: 0 0 8px 8px; }
.list-item:nth-child(odd) { background: #f9f9f9; }

.text:empty::before { content: 'No content'; }

/* Position selectors */
.nav-item:first-of-type { margin-left: 0; }
.nav-item:not(:last-child)::after { content: '/'; margin: 0 1rem; }

/* :has() selector */
.form-group:has(:invalid) { border-color: red; }
.form-group:has(:focus-within) { border-color: var(--primary); }
.card:has(img) { grid-column: span 2; }

/* Pseudo-elements */
.quote::before { content: open-quote; font-size: 2rem; }
.quote::after { content: close-quote; font-size: 2rem; }

.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.tooltip:hover::after { opacity: 1; }

/* Combinators */
.article > p { margin-bottom: 1rem; }
.sidebar + main { margin-left: 2rem; }
h2 ~ p { color: #666; }

/* Specificity examples */
/* 0-1-0 */ .button { }
/* 0-1-1 */ .button.primary { }
/* 0-2-0 */ .header .nav { }
/* 1-0-0 */ #header { }

/* Modern selectors */
.items:has(> .empty) { display: none; }
.list:not(:has(.active)) .empty-state { display: block; }

Practice

Style a form using only advanced CSS selectors.