How to target the active email row in Gmail interface with CSS selectors

[danwilson85]

I need help finding the right CSS selector to identify the currently selected email row in Gmail’s inbox interface. You know how there’s that small arrow indicator on the left side that shows which email is active? That’s the row I want to target. You can move this selection up and down using the j and k keyboard shortcuts.

I’ve been experimenting with this selector but it’s not working correctly and selects all rows instead of just the active one:

jQuery("#canvas_frame").contents().find('tr#.zA>td:first-child>img[style]')

What I’m looking for is actually two different selectors. The first one should select only the currently active row (the one with the arrow). The second selector should target all the other rows except the currently selected one.

Any suggestions on how to accomplish this?

[Alex_Thunder]

gmail changes their selectors all the time, but try tr[aria-selected="true"] or tr.zA.yW for the active row. i’ve had better luck with aria attributes since they’re more stable. for non-active rows, just add :not([aria-selected="true"]) to your selector.

[livbrown]

In Gmail’s interface, the currently active email row typically has specific class names like zA zE. You can use the selector tr.zA.zE to precisely target the active row. For selecting all other rows, tr.zA:not(.zE) should work well. It’s important to remember that Gmail may update these class names over time, so it’s wise to frequently inspect the DOM to ensure your selectors remain effective. Additionally, consider utilizing ARIA attributes or data attributes for greater stability, as they can persist through updates better than class names.

[ZoeStar42]

From my experience with Gmail’s interface, active rows typically use zA yW classes or sometimes include btb. But I’ve found it’s more reliable to target the row with the arrow indicator directly. Try tr.zA td[style*="visibility: visible"] parent() or tr.zA:has(img[style*="visibility"]) if your browser supports :has(). The arrow image uses inline styling that toggles its visibility when active. Gmail hides the arrow on non-active rows, so you can target those with tr.zA:has(img[style*="hidden"]) or similar selectors that focus on the hidden state.