How class editing works with multiple selections
Most style controls in Handrix behave the same whether you have one element selected or several — they apply your change uniformly. The Classes section is a little different. The badge list adapts to what the selection actually has in common, and that needs explaining because some intuitive expectations about it are wrong.
What the badge list shows
The badge list is the intersection of the selected elements’ class lists, counted by how many times each class appears.
A class shows as one badge only if every selected element has that class at least once. If even one element doesn’t have it, the class is hidden — not greyed out, not flagged, just absent. A class shows as two badges only if every selected element has it at least twice.
This is an intentional choice. The alternative — showing the union of all classes across the selection — would let you “remove” a class from elements that didn’t have it, or “add” a class only some elements were missing. Both are confusing in their own way. The intersection rule means anything you see in the panel is something you’re guaranteed to be editing across the whole selection.
Why duplicates are visible at all
A class can appear twice in the same class="..." attribute. Browsers ignore the duplicate, so visually nothing changes — but it’s still in the markup. Some teams treat that as a mistake to clean up; others rely on it (for example, when a class is added programmatically and then again declaratively). Rather than silently de-duplicating, the panel surfaces the situation: a class repeated on an element gets an amber-bordered badge, and clicking remove takes off one occurrence rather than all of them. This way the panel tells the truth about the markup, and you decide what to do with it.
What this means in practice
If you’re editing two cards that look the same but one is missing a card--featured class, the panel won’t show card--featured until you add it explicitly to both. That’s by design — it nudges you toward the cleaner outcome of making the selection actually consistent, rather than papering over the mismatch.
Related
- How-to: Manage classes on an element
- Reference: Classes panel