How deeply does CSS in Depth, Second Edition cover ID selector?

Defines ID precedence, compares selector counts, and stops short of broader cascade details beyond specificity.

ID selector

As explained in CSS in Depth, Second Edition

A CSS selector that matches an element by its ID attribute.

An ID selector matches an element by its ID attribute, using a hash-prefixed name such as #page-title. In the cascade, one ID outweighs any number of class selectors and outranks tag selectors. section 1.1.3

Listing 1.6 Selectors with increasing specificities

html body header h1 {     #1
  color: blue;
}

body header.page-header h1 {     #2
  color: orange;
}

.page-header .title {     #3
  color: green;
}

#page-title {      #4
  color: red;
}

Compare selectors from least to greatest specificity: four tag names, one class with tags, two classes, then the single ID selector #page-title. section 1.1.3

Resolving a highlighted navigation link

A broad #main-nav a rule can keep links teal while #main-nav .featured overrides only the featured link with an orange background. This targeted combination is preferable to adding !important, which forces the declaration outside ordinary specificity decisions. section 1.1.3

How CSS in Depth, Second Edition covers it

liveBook manning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

Tiny CSS ProjectsAn ID selector is a CSS selector that matches the element having a specified ID value.
liveBook manning.com

Web Design Playground, Second EditionAn ID selector is a CSS selector that matches the element identified by a specified HTML id attribute value.

Compare how 3 books explain ID selector →

Related concepts

CSS selectorkind of · A CSS selector is a pattern that identifies document elements by their names, attributes, relationships, states, or other conditions.
class selectorcontrasts with · A class selector is a CSS selector that matches elements whose class attribute contains a specified class name.
CSSuses · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
Shadow DOMaddressed by · Shadow DOM is a web platform mechanism for attaching a DOM subtree to an element while encapsulating its structure and styles from the surrounding document.
cascade layercontrasts with · A CSS cascade layer is a named or anonymous group of declarations whose precedence is explicitly ordered within the cascade.

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.