Why does st.html in Streamlit doesn't reflect when the style changes?

Question

I wanted to have a st.divider with different colours and apparently there is no colour parameter for this function. So, I ended up using st.html with style like below:

st.html(
    '''
    <style>
    hr {
        border-color: red;
    }
    </style>

    <hr />
    '''
)

This works fine and I get a red line.

However, I would like to have one more line at the end of my page in blue. So I used the same tag but with different style like below

st.html(
    '''
    <style>
    hr {
        border-color: blue;
    }
    </style>

    <hr />
    '''
)

The moment I add this, both the <hr /> becomes blue in the screen. Why does this happen and how do we fix this?

Answer 1

Most likely the last element take precedence for CSS styling and overrides previous entry for the same selector. One way to avoid it is to use id or class for selection of elements:

import streamlit as st

st.title(f"Example Streamlit App :balloon: {st.__version__}")

st.html(
    '''
    <style>
    #hr1 {
        border-color: red;
    }
    </style>

    <hr id="hr1" />
    '''
)

st.html(
    '''
    <style>
    #hr2 {
        border-color: blue;
    }
    </style>

    <hr id="hr2" />
    '''
)

or:

import streamlit as st

st.title(f"Example Streamlit App :balloon: {st.__version__}")

st.html(
    '''
    <style>
    .hr1 {
        border-color: red;
    }
    </style>

    <hr class="hr1" />
    '''
)

st.html(
    '''
    <style>
    .hr2 {
        border-color: blue;
    }
    </style>

    <hr class="hr2" />
    '''
)

Output: