CSS Selector: Simple, Compound, Combinator, Complex

ai answer

CSS Selectors are patterns used to select HTML elements to style them. They are the core of CSS.

CSS selectors are broadly classified into several categories:

1. Simple Selectors

These target elements based on a single criterion.

• Type (Element) Selectors: div, p, h1 — selects by tag name.
• Class Selectors: .classname — selects elements with a specific class.
• ID Selectors: #idname — selects a unique element by ID (highest specificity).
• Universal Selector: * — selects all elements.
• Attribute Selectors: [attr], [attr=value], [attr~=value], [attr|=value], [attr^=value], [attr$=value], [attr*=value] — selects based on attributes.
• Pseudo-class Selectors: :hover, :nth-child(2), :first-child, :focus, :not(), :is(), :where(), etc.
• Pseudo-element Selectors: ::before, ::after, ::first-line, ::selection, etc.

2. Compound Selectors

A compound selector is a sequence of simple selectors without any combinators between them. It represents an element that matches all the conditions simultaneously.

Examples:

• div.classname → a <div> that also has class classname
• a#special:hover → an <a> with id special that is being hovered
• input[type="text"]:focus → a text input that is focused
• p:first-child → a paragraph that is the first child of its parent

Compound selectors are powerful because they increase specificity without adding extra rules.

3. Combinators (Relationship Selectors)

Combinators define the relationship between two or more selectors. They are placed between selectors.

Important notes on combinators:

• Combinators have different precedence. The descendant (space) has the lowest precedence.
• You can chain multiple combinators: div > ul li + p (read from right to left).
• Combinators work with compound selectors too: section.article > h2 + p.special.

4. Other Important Selector Types

Complex Selectors

A selector that contains at least one combinator is called a complex selector.

Selector Lists

Multiple selectors separated by commas (logical OR):

h1, h2, h3, .title {
  font-family: sans-serif;
}

Pseudo-class Functions (newer powerful ones)

• :is() — logical OR inside a selector (reduces repetition)

  :is(header, main, footer) p { ... }

• :where() — like :is() but with zero specificity
• :not() — negation
• :has() — parent selector (very powerful, "if it contains...")

  article:has(h2) { ... }        /* articles that contain an h2 */

Specificity Rules (Quick Reminder)

Specificity determines which rule wins when multiple selectors match the same element.

Order (highest to lowest):

1. Inline styles (style="...")
2. ID selectors
3. Classes, attributes, pseudo-classes
4. Elements, pseudo-elements

Compound selectors add up specificity. Combinators themselves do not add specificity (except the :is()/where() behavior).

Examples in Action

/* Simple + Compound */
p.special { color: blue; }
#hero { font-size: 2rem; }

/* Combinators */
article > h2 { margin-top: 0; }           /* direct child */
nav ul li + li { border-left: 1px solid; } /* adjacent siblings */
h1 ~ p { margin-top: 0.5em; }             /* general siblings */

/* Complex compound */
div.content > p:first-child { font-weight: bold; }

/* Modern */
:is(h1, h2, h3) { line-height: 1.2; }
article:has(> img) { border: 1px solid; }

Summary Table