| Selector | Category | Description | Example | Support |
|---|
CSS Selectors Reference documents all CSS selector types with syntax, description, and live examples. Browse universal, type, class, ID, attribute, pseudo-class, pseudo-element, combinator, and modern selectors (:is(), :where(), :has(), :not()). Each entry shows the selector syntax, what it matches, browser support, and interactive examples you can edit and preview.
CSS selectors form the foundation of CSS styling -- they determine which HTML elements a rule applies to. CSS Selectors Level 4 (2023) introduced powerful new selectors: :has() (parent selector -- matches an element that contains a specific child), :is() (selector list shorthand), :where() (0-specificity grouping), :focus-visible (keyboard focus only), :modal, :picture-in-picture. Older but important: :nth-child(An+B of selector), :not() (exclusion).
Selector performance: while browsers are fast at selector matching, complex selectors with many descendant combinators (space) are slower than class selectors. The browser reads selectors right-to-left -- div p span .highlight first finds all .highlight elements, then checks if they are inside span, etc. For performance: prefer class selectors (.component) over tag-based chains (div.container ul li a). Avoid deep descendant chains in performance-critical rendering loops.
All even table rows
Result: tr:nth-child(even) { background: #161b22; } -- targets every 2nd row
Has a required input
Result: form:has(input:required) -- matches form elements containing required inputs (CSS :has())
Direct children only
Result: ul > li -- targets only li that are direct children of ul (not nested li inside nested ul)
What is the CSS :has() selector and how do I use it?
:has() is the parent selector -- it matches an element if it contains a specific descendant or sibling. Examples: a:has(img) { } -- links that contain an image. form:has(input:invalid) { } -- forms containing invalid inputs. div:has(+ .active) { } -- div immediately followed by .active. :has() has the specificity of its most specific argument. Browser support: Chrome 105+, Firefox 121+, Safari 15.4+. This is one of the most requested CSS features -- it allows CSS to style parent elements based on their children, something previously only possible with JavaScript.
What is the difference between :nth-child() and :nth-of-type()?
:nth-child(n): counts all siblings and selects the nth one, regardless of tag type. p:nth-child(2) matches a p that is the 2nd child -- but only if that 2nd child IS a p. :nth-of-type(n): counts only siblings of the same type. p:nth-of-type(2) matches the 2nd p element among its siblings, regardless of what other elements are between them. CSS Selectors Level 4 added :nth-child(An+B of selector) which filters by a selector: li:nth-child(2 of .featured) matches the 2nd li with class .featured.
What are CSS pseudo-elements and how are they different from pseudo-classes?
Pseudo-classes (single colon :): target elements based on state or position. :hover (user hovers), :focus (keyboard/pointer focus), :first-child (first child element), :nth-child() (positional). They match existing elements. Pseudo-elements (double colon ::): create virtual sub-parts of elements that aren't in the HTML. ::before and ::after insert generated content before/after the element's content. ::placeholder styles input placeholder text. ::selection styles highlighted text. ::first-line, ::first-letter target the first line/letter of text. They create new styleable entities.
How do CSS attribute selectors work?
Attribute selectors match elements based on their attributes: [attr] -- has the attribute. [attr='val'] -- exact match. [attr^='val'] -- starts with. [attr$='.pdf'] -- ends with. [attr*='val'] -- contains (substring). [attr~='val'] -- contains as a whitespace-separated word (like class matching). [attr|='en'] -- exactly 'en' or starts with 'en-' (useful for language codes). Case-insensitive: [attr='val' i]. Examples: a[href^='https'] (secure links), img[src$='.svg'] (SVG images), [data-active='true'] (data attributes).
What are the combinator selectors in CSS?
CSS combinators define relationships between selectors: Descendant (space): div p -- any p inside a div, at any depth. Child (>): ul > li -- only li directly inside ul. Adjacent sibling (+): h2 + p -- p immediately following h2. General sibling (~): h2 ~ p -- all p elements that follow h2 (at the same level). Column combinator (||): col || td -- table cells in a column (experimental). The :is() pseudo-class acts like a combinator but accepts a selector list. Performance note: descendant selectors are the slowest; child selectors (>) are faster for large DOMs.