liveBook · Manning

Context-dependent selector

As explained in CSS in Depth, Second Edition

A context-dependent selector is a CSS selector whose matching or styling intent depends on an element's ancestor or location in the document structure.

A context-dependent selector makes an element’s styling depend on where it appears, such as targeting a dropdown with `.page-header .dropdown`. Although this can work initially, it binds the component to one context, increases specificity, and makes related rules harder to locate and maintain. section 9.1.3

Prefer explicit module modifiers when a component needs a variation:

  • Keep the base component reusable, then add a modifier class for each independent variation. section 9.1.3
  • Use naming that visibly separates the module from its modifier, such as `message--error`. section 9.1.3

How CSS in Depth, Second Edition covers it

How deep it goes
Explains maintenance, specificity, and reuse consequences, then demonstrates modifier-based alternatives with CSS and markup.
Examples
Uses inverted dropdowns, message states, and buttons combining success, danger, small, and large modifiers.
What it assumes
Assumes familiarity with CSS selectors and classes while demonstrating module and modifier naming through concrete examples.
What you can do after
Apply it via CSS classes to build reusable component variations without binding styles to document location.
How it connects
Connects descendant selectors and specificity with modular CSS, modifier classes, and reusable components.
Cover of CSS in Depth, Second Edition
liveBookmanning.com
Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.