Demo · CSS styles chain

CSS styles chain

When someone is building a website, they often open a tool called the DOM inspector. Current versions of Chrome call that tool DevTools. It is where you look when a page’s design, its CSS, or its performance is off.

This page is a demo of a redesign of one part of that inspector: the CSS styles pane. That is the list you get after you click an element and want to know which settings are actually in force. The elements tree and the rest of DevTools are left alone for now.

In that list, a lot of the lines are crossed out. The crossed-out line is often the one that says what you were looking for.

Scroll, and the next copy of that same setting is crossed out too. The docs say the winner sits above the strike. On a real card, both background lines are struck, and the line that paints the card is further down, on a rule whose name does not look like the thing you clicked.

The struck line does not point at the line that beat it. If that one lost as well, there is still no trail. You start to wonder if the line is crossed out because it uses a variable defined further up the page. That is a bad way to draw it, and it isn’t what happened. The variable is only the value. Another rule won.

The rule’s name makes the hunt worse. .doc .openblock.cards .exampleblock.tile > .content reads as if the box you clicked carried every one of those classes, or as if each class donated a property. The box only has content. The other words are checks on the boxes around it, and every check has to pass. A comma starts a second check. The grey half is the check that failed. Those grey words are not classes on your element. Hover the rule and the panel shows (0, 6, 0). The middle number is how many classes are in the check. The panel never says so.

A color or a font that came from the page around the box is dropped into the same flat list, as if the box had set it. Right-click a property and the last item in the menu, with no icon, is “View computed value.” That opens another tab, leaves a diagram of the box up, and then lists every name that contains the word you asked about. Ask about background and background-color, background-image, and the rest show up at the same size.

The buttons below open another way of reading that same card. One is the tool. One is the card by itself, so you can open Chrome’s panel on it and compare. The third draws an earlier version of the idea inside a page.

Open the inspector Open the sample page In-page layout

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 inspector 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 6 is one stylesheet rule, numbered in the order the page loads its files. 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.
The property you asked about stays the subject. In DevTools, “View computed value” sits last in the right-click menu and has no icon. It opens Computed, leaves the box-model diagram up, and filters by that word. Asking about background then lists every background-* name at the same weight. Here, names that only share the word sit under that property, in grey, after the chain.