Master Modern CSS Selectors to Simplify Code and Boost Maintainability

Effective use of CSS selectors can dramatically improve code quality and maintainability; this article introduces a collection of modern selector techniques that streamline stylesheets and enhance their manageability.

1. :is() – the selector combiner

The :is() pseudo‑class groups multiple selectors, drastically reducing duplicated code.

/* Before */
header p, main p, footer p {
    line-height: 1.6;
}

/* Using :is() */
:is(header, main, footer) p {
    line-height: 1.6;
}

2. :where() – zero‑specificity saviour

The :where() pseudo‑class works like :is() but carries a specificity of 0, making its rules easier to override.

/* Higher specificity */
article :is(header, footer) p {
    color: #333;
}

/* Zero specificity */
article :where(header, footer) p {
    color: #333;
}

3. :has() – parent‑selection revolution

The relational selector :has() lets you select a parent element based on its children.

/* Paragraph containing an image */
p:has(img) {
    display: flex;
    align-items: center;
}

/* Paragraph followed by an <h2> */
p:has(+ h2) {
    margin-bottom: 2em;
}

4. Attribute selector wildcard matching

Wildcard attribute selectors provide flexible matching for elements.

/* All data attributes containing “important” */
[data-*= "important"] {
    font-weight: bold;
}

/* Elements with a specific language */
[lang|= "en"] {
    font-family: 'Arial', sans-serif;
}

5. Advanced :nth-child() usage

Formula‑based :nth-child() enables complex selection patterns.

6. :not() with multiple arguments

The updated :not() accepts a list of selectors, greatly expanding exclusion capabilities.

7. Cascade layer management with @layer

Using @layer helps control style priority and reduces specificity wars.

8. Smart focus with :focus-visible

Provides intelligent focus‑state handling, cutting unnecessary outline styles.

9. :empty – handling empty elements

Elegantly targets empty elements without extra class names.

10. Adjacent sibling combinators

Combine + and ~ selectors to manage element relationships flexibly.

11. Compound selector optimization

Merge multiple selector conditions for precise matching.

12. Container queries for responsive design

Container queries enable more accurate responsive layouts.

@container sidebar (min-width: 400px) {
    .widget {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

Feel free to add more tips.