At a high level, all components have a class name that starts with _retool-componentname, like _retool-textinput. There's a bit of a guide here, but honestly the best resource is your browser's developer tools since the specific selector you need could get quite nested. This is all based on CSS selectors and I'm not an expert on the topic, but here's an outline of how I went about finding this.
This workflow is for chrome specifically, but all major browsers should support something similar. We can start is by right clicking the area of the page I want to find the selector for, and selecting inspect:
That brings up the chrome dev tools Elements section with the specific class the mouse was above expanded:
Here we can see that inside of the _retool-table1 class, there are many nested layers that go down to the specific cell that I originally right clicked on to inspect. As we mouse over different items in this view it will highlight the matching elements on the page:
The table rows for all table components are all of the class rt-tr, so styling .rt-tr would affect every row anywhere in the app (or everywhere if that was used in preloaded css)
If we add the ._retool-table1 on this, we can target the rows of just the table1
component:
I also noticed that the selected row has an additional selected
class here, so we can add that to only affect the rows in table1
which are selected: