In Firefox’s developer tools — instead of attempting to navigate through the HTML code to find the element, just right-click on it and select “Inspect Element”
You’ll get dropped into the Inspector tab right where you need to be.
There’s also an element picker tool that you can use instead — click on it & then click on the element within the page. Same result.
I am building a page that allows employees to search for public MS Teams groups — for some reason, Teams uses a ‘starts with’ search, and our staff rarely manages to find the public Teams that are out there. I wanted the list of teams and descriptions to have a visible line separation, and a table border looked bad with the enterprise color scheme. I decided to use even/odd table rows to display a slightly lighter background color. I set an opacity on the background so the actual background image is still visible.
My font colors changed! The opacity applied to the text as well.
Instead of setting an opacity on the row, I added an alpha channel to the row background color without impacting the text within table cells.
