Use CSS descendant combinator styling

Dash Python
1

Hi all,

I am trying to make use of CSS decendant selector concept (apologies for the -maybe- poor phrasing, this is what I refer to Descendant combinator - CSS: Cascading Style Sheets | MDN), but I cannot make it work and I am running out of ideas.
Below is a simple snippet to reproduce the issue:

import dash
import dash_html_components as html

app = dash.Dash(__name__, title='demo')

layout = html.Div([
    html.H1('That should be green', className='pastoral'),
    html.H2('That should be red', className='pastoral'),
], id='main')

app.layout = layout

if __name__ == '__main__':
    app.run_server(debug=True)

I have another style.css file under the assets directory that looks like:

.pastoral {
    color:green
}

.pastoral h2 {
    color:red
}

When running locally, both sentences appear in green whereas I would have expected the second one to appear in red.
Maybe I am missing something in the way dash html components are working.

Thank you for any help !

2

use this as css:

.pastoral {
    color:green
}

h2.pastoral {
    color:red
}