Black Lives Matter. Please consider donating to Black Girls Code today.

Use CSS descendant combinator styling

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 https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator), 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 !

use this as css:

.pastoral {
    color:green
}

h2.pastoral {
    color:red
}