CSS selector
A CSS selector is a pattern that identifies document elements by their names, attributes, relationships, states, or other conditions.
Tiny CSS Projects
A CSS selector is a pattern that identifies the elements to which a set of style declarations applies.
- How it is used
- Targets HTML elements for CSS declarations while styling an article and a checkout cart.
- How deep it goes
- Works through basic selectors, combinators, pseudo-selectors, inheritance, and specificity with code examples.
- Examples
- Uses article headings, nested lists, link states, and checkout-cart table headers.
- What you can do after
- Build it from scratch: write CSS rules that target elements by name, attribute, relationship, or state.
Web Design Playground
A CSS selector that matches elements based on an element's ID attribute value.
- How it is used
- Targets an element by its id value so a CSS rule can style it.
- How deep it goes
- Defines hash syntax, naming rules, examples, selection guidance, and specificity consequences without detailing browser internals.
- Examples
- Uses two div elements labeled section-quote and section-summary, each styled through its corresponding ID selector.
- What you can do after
- Apply it in an internal or external style sheet to target an element using its ID value.
WordPress Power Toolkit: Harness AI to build next-level websites
A CSS selector is a pattern that identifies the HTML elements to which a CSS rule applies.
- How it is used
- Targets page elements for CSS rules when customizing appearance and inspecting applied styles.
- How deep it goes
- Defines rule syntax and element and class selectors, then demonstrates live inspection while deferring other selector kinds.
- Examples
- Uses h1 rules, reusable greensans classes, and a generated selector for hiding blog-post dates.
- What you can do after
- Operate/configure it to apply reusable class styles and inspect or test page styling.
Read how WordPress Power Toolkit: Harness AI to build next-level websites explains CSS selector →
D3.js in Action, Third Edition
A CSS selector is a syntax pattern that identifies elements in a document according to their names, attributes, classes, IDs, or relationships.
- How it is used
- Targets DOM elements for D3 manipulation, browser data extraction, and visualization construction.
- How deep it goes
- Explains tag, class, ID, descendant, and grouped selectors with code, then distinguishes first-match and all-match selection.
- Examples
- Uses headings, paragraphs, circles, a visualization container, and Wikipedia tables as selector targets.
- What you can do after
- Apply it via D3 and browser DOM methods to select one element, many elements, descendants, or grouped targets.
Read how D3.js in Action, Third Edition explains CSS selector →
Web Components in Action
A CSS selector is a pattern that identifies elements to which stylesheet rules apply.
- How it is used
- Uses selectors to target intended elements and control CSS leakage around Web Components.
- How deep it goes
- Explains global matching, component qualification, Shadow DOM isolation, and :host, while only cautioning about deprecated selectors and support.
- Examples
- Uses a numerical stepper, global button styles, qualified selectors, generic shadow-root selectors, and :host.
- What you can do after
- Diagnose style creep and apply scoped selectors or Shadow DOM selectors to protect component styling.
CSS in Depth, Second Edition
A CSS selector is a pattern that identifies the elements to which a group of declarations applies.
- How it is used
- Identifies the page elements to which CSS declarations apply and participates in resolving conflicting styles.
- How deep it goes
- Defines selectors, demonstrates specificity through conflicting rulesets, and explains unsupported-selector fallbacks without surveying every selector type.
- Examples
- Uses body, h1, ID, class, invalid-input, and user-invalid selectors in page-header, navigation, heading, and form examples.
- What you can do after
- Evaluate which competing CSS rule wins and apply selector fallbacks that preserve styling when newer syntax is unsupported.
Read how CSS in Depth, Second Edition explains CSS selector →
BDD in Action, Second Edition
A CSS selector is a pattern for selecting elements in a web document based on element names, classes, attributes, relationships, and other criteria.
- How it is used
- Locates web elements for automated UI acceptance criteria when stable IDs, names, or data attributes are unavailable.
- How deep it goes
- Explains selector syntax through tables and nested-element examples, then stops short of broader CSS language coverage.
- Examples
- Uses welcome messages, navigation links, login fields, and featured destinations including Singapore.
- What you can do after
- Apply via WebDriver's By.cssSelector() method to locate single elements or collections and assert their content or count.
Read how BDD in Action, Second Edition explains CSS selector →
Web Design Playground, Second Edition
A CSS selector is a pattern that identifies the web page elements to which a style rule applies.
- How it is used
- Targets the page elements that receive CSS declarations, from broad element groups to narrowly combined selectors.
- How deep it goes
- Explains element, class, descendant, child, ID, and comma-separated selectors with examples, but defers broader selector techniques.
- Examples
- Uses h1 headings, pull quotes, sidebars, footnotes, external links, and even-numbered list items.
- What you can do after
- Apply CSS selectors to style broad groups or precisely targeted page elements.
Read how Web Design Playground, Second Edition explains CSS selector →
Related concepts
- CSSpart of · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
- class selectorincludes · A class selector is a CSS selector that matches elements whose class attribute contains a specified class name.
- ID selectorincludes · An ID selector is a CSS selector that matches an element by the value of its id attribute.
- type selectorincludes · A CSS selector that matches elements by their element or tag name.
- universal selectorincludes · The CSS universal selector, represented by an asterisk, matches elements of any type within a document or selected scope.
- CSS nestingused by · CSS nesting is a stylesheet feature that allows rules to contain nested selectors and declarations expressing hierarchical or related selector structures.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.