CSS Styling For Specific Component

[Praful]

I currently want to apply some css to stHorizontalBlock st-emotion-cache-ocqkz7 e1f1d6gn5 but It is apply css to other components of same type. How can I fix this issue ?

Note : This class is of streamlit columns so I cannot put them between html div & give them a identical id.

[mathcatsand]

Can you provide more information about what you want to achieve? Generically, you could use an nth-child selector, or insert a container within the column to style, or specifically target the elements within the column…

[Praful]

My Page has around three places where columns are being used. If I use a container & give it a key. The css I am applying is not affecting the current styling. If I select the 1st child it is affecting two diff column components but not the ones I want. Is there any way through which I can filter the css affect to only one ?

[blackary]

You can try something like this:

import streamlit as st

col1, col2 = st.columns(2)

with col1.container(key="col1"):
    st.write("Hello")

with col2.container(key="col2"):
    st.write("World")

st.html("""
<style>
    .st-key-col1 p {
        font-weight: bold;
        background-color: yellow;
    }
</style>
""")