Personnal CSS for only one container

[jgutton]

Hello,

with the code below, i was wondering how you do to personnalize the display : for example how do you add color and border to only container 1, add specific css for container 3 that we want to be a fix footer for example.
the st.info etc… are very usefull but limited as you cannot apply to a whole container for example. Otherwise when i use CSS it applies to all the 3 container.

Thanks for your help

Code snippet:

bloc1=st.container()
bloc2=st.container()
bloc3=st.container()


with bloc1:
    st.write('This is container 1')
    
with bloc2:
    col1,col2=st.columns((3,3))
    with col1:
        st.write("Let say Col1")
    with col2:
        st.write("here is Col2")
        
with bloc3:
    st.write("this is actually my footer")

Thanks for your help

[sridharr]

@jgutton,

Its really hard with streamlit to different each container because streamlit generate own class on the fly.
it is not same as all the time.

[mathcatsand]

If you are careful to put everything in containers up to the point of custom formatting, you can get away with an nth-of-type selector.

import streamlit as st

with st.sidebar.container():
    st.write('This is container 1.')
with st.sidebar.container():
    st.write('This is container 2.')
with st.sidebar.container():
    st.write('This is container 3.')
with st.sidebar.container():
    st.write('This is container 4.')
side = st.sidebar.radio('Highlight Sidebar Container',[1,2,3,4])

with st.container():
    st.write('This is container 1.')
with st.container():
    st.write('This is container 2.')
with st.container():
    st.write('This is container 3.')
with st.container():
    st.write('This is container 4.')
body = st.radio('Highlight Body Container',[1,2,3,4])

st.markdown('#### Be sure nothing is mixed in with the containers up until the nth one '\
            'you are trying to format. The introduction of some other div will '\
            'mess of the index to the nth container.')

css_sidebar_container = f'''
<style>
    [data-testid="stSidebarNav"] + div [data-testid="stVerticalBlock"] div:nth-of-type({side})
    [data-testid="stVerticalBlock"] {{background-color:rgba(175,238,238,.2);}}
</style>
'''
css_body_container = f'''
<style>
    [data-testid="stSidebar"] + section [data-testid="stVerticalBlock"] div:nth-of-type({body})
    [data-testid="stVerticalBlock"] {{background-color:rgba(175,238,238,.2)}}
</style>
'''
css_radio = '''
<style>
    [role="radiogroup"] {flex-direction: row;}
</style>
'''

st.markdown(css_sidebar_container,unsafe_allow_html=True)
st.markdown(css_body_container,unsafe_allow_html=True)
st.markdown(css_radio,unsafe_allow_html=True)

Example hosted here:
https://mathcatsand-examples.streamlit.app/formatted_container