CSS Selectors, Combinators & Specificity

1. The 4-Column Specificity Calculation Algorithm

When multiple selectors apply to the exact same element and declare the same property, the browser determines which rule wins using Specificity. Specificity is calculated as a 4-component vector:

/* Specificity comparison */
p { color: #64748b; }                  /* (0, 0, 0, 1) */
.desc { color: #2563eb; }              /* (0, 0, 1, 0) - WINS over element */
#main-desc { color: #16a34a; }         /* (0, 1, 0, 0) - WINS over class */

2. CSS Combinators: Targeting Relationships

Combinators explain the relationship between two selectors in the DOM tree hierarchy:

/* Child vs Descendant vs Adjacent Sibling */
.parent > .child {
  border: 2px solid #3b82f6;
  padding: 8px;
  margin-bottom: 8px;
}

h4 + p {
  font-weight: bold;
  color: #d97706; /* Styles first paragraph immediately following h4 */
}

3. Attribute Selectors & Pattern Matching

Target HTML elements based on their HTML attributes and values with regex-like operators:

• [disabled]: Matches any element with the attribute present.
• [type="email"]: Exact string match.
• [href^="https"]: Starts with "https" (e.g. secure external links).
• [href$=".pdf"]: Ends with ".pdf" (e.g. document download links).
• [class*="btn-"]: Contains substring "btn-" anywhere in class attribute.
• [href*="github" i]: Case-insensitive matching with the i flag.

a[href^="https://"]::after {
  content: " ↗";
  font-size: 0.85em;
  color: #2563eb;
}

a[href$=".pdf"]::after {
  content: " [PDF]";
  font-size: 0.8em;
  color: #dc2626;
  font-weight: bold;
}

4. Modern Functional Pseudo-Classes: :is, :where, and :has

Modern CSS specifications introduced game-changing functional pseudo-classes:

A. The Parent / Relational Selector: :has()

Previously, CSS could never style a parent element based on its children without JavaScript. :has() checks if an element contains descendants matching a selector.

/* Style a card container when its internal checkbox is checked! */
.todo-card:has(input:checked) {
  opacity: 0.6;
  text-decoration: line-through;
  background-color: #f1f5f9;
}

B. :where() vs :is()

/* Interactive :has() demonstration */
.card-item {
  border: 2px solid #cbd5e1;
  padding: 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* Card reacts dynamically when child input is focused */
.card-item:has(input:focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.card-item input {
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  outline: none;
}

5. Pseudo-Elements: Generating Virtual Content

While pseudo-classes target states (like :hover), pseudo-elements target virtual DOM fragments that do not exist in the source HTML:

• ::before & ::after: Injects cosmetic content via the content: "" property.
• ::marker: Styles the bullet or number indicator of list items (<li>) directly.
• ::selection: Customizes the highlight color when users select text with their cursor.
• ::first-letter: Creates classic editorial drop-caps.

6. Frequently Asked Questions (FAQ)