Selecting a specfic extender container

[roentgen11]

I am displaying several st.extender containers by looping through a for loop. I would like to change the background color of certain extender containers based on business logic. For example, I would like to change the background color of the 3rd extender in the loop while the others remain the default color. Is there a way to selecting individual components using CSS or javascript?

When I use the firefox inspector tool each

corresponding to the extender component is exactly the same so when I try to use custom CSS the background color of all of my extender containers changes.

[andfanilo]

Hi @roentgen11, welcome to the forum!

Yeah you unfortunately cannot do that AFAIK with CSS Selection

But you can use Javascript to break out of an iframe then select particular components of your webpage, for example:

st.button("Hello Red")
st.button("Hello Blue")
st.button("Hello Green")

components.html(
    """
<script>
const elements = window.parent.document.querySelectorAll('.stButton button')
elements[0].style.backgroundColor = 'lightcoral'
elements[1].style.backgroundColor = 'lightblue'
elements[2].style.backgroundColor = 'lightgreen'
</script>
""",
    height=0,
    width=0,
)

I describe it here if you want to see it in action

Fanilo

[roentgen11]

Thank you Fanilo. This worked very well.