CSS styles chain

In-page layout

This page draws the chain in place, from a fixed example. The inspector window reads the sample file instead. Pick an element and edit the properties that actually apply to it. Each property is a chain: important declarations that lost, the one in effect, then ordinary and inherited declarations that no longer apply. A selector that missed this element never appears.

Demo controls

Theme is the page under inspection, not a switch in the inspector. Dark adds the dark-theme rule to this example. Light leaves it out, because it does not match.

Light page Dark page

CSS styles chain

What the long selector is

One test, read from the outside in. .doc .openblock.cards .exampleblock.tile > .content matches only if every piece matches. The div you clicked has class content. tile and exampleblock are on its parent. openblock and cards are on a further ancestor. doc is further still. It does not mean the div carries all of those classes, and one class on the div is not enough.
Grey names after a comma are a failed alternative. .doc .exampleblock > .content, .doc details.result > .content is two selectors. The comma means “or”. DevTools greys .doc details.result > .content because this div is not inside details.result. Those grey tokens are not classes on your element. This desk omits the half that missed.
(0, 6, 0) is six classes. The hover triple is (ids, classes, element names). .content is a class, so it counts in the middle number. The > adds nothing. DevTools prints the triple and does not say that.
The nest is two trees drawn as one list. Ancestry is a tree. Each property is a short stack of declarations that matched. DevTools flattens both into selector cards, including rules that matched an ancestor and alternatives that matched nothing. The chain keeps the stack, and the element tree keeps the ancestry.
The chain is a number, not the selector. class 5 is one stylesheet rule. The line stays short enough to scan. Opening the number inserts that one rule under the property. The triangle at the end of the line is the only control that opens every class. The cards are indented by how far the selector reaches into the element tree. A loss says which number beat it, in that card, not under the rest of the list.
The property you asked about stays the subject. In DevTools, the jump is named “View computed value”, sits last in the right-click menu, and has no icon. It opens a tab called Computed, leaves the box-model diagram up, and filters by that word. Asking about background then lists background-color, background-image, and every other name that contains the word, at the same weight. Here, a losing crumb says what beat it. Names that only share the word sit under that property, in grey, after the chain.