How can I style nested components?

[igor17400]

I have a HTML code such as the one below

<p> <img src="image reference" /> </p>

I want to style the image(<img>) tag inside the paragraph (<p>). How can I do it with the style field inside Html widget such as the one below?

Html(
          data: htmlData,
          style: {
            'h1': Style(
                textDecoration: TextDecoration.none,
                fontStyle: FontStyle.normal),
            'p': Style(fontStyle: FontStyle.normal, textAlign: TextAlign.justify),
            'img': Style(
                display: Display.BLOCK,
                margin: EdgeInsets.symmetric(vertical: 15))
          }
) 

[erickok]

I don't think we support this, right @tneotia ?

[tneotia]

I'm fairly certain CSS style selectors work as the key for the map, so he could use p > img to select any images directly inside a p.

[igor17400]

@erickok @tneotia
By using p > img, I'm selecting the image tag inside the paragraph tag and then applying the rule text-align: center.
The problem is that I need to apply text-align: center to the paragraph tag (<p>), since by using this rule inside image tag (<img>) won't align the image.

I have used this article as an inspiration - https://html-online.com/articles/image-align-center/

I think I need to select the paragraph tag that has an image as a child. Something similar to this https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Do you guys have any idea how could I achieve this?

[erickok]

For sure we do not support the :has selector.

If you just want to center-align images (perhaps only images with some class or property) you can use the image render API (see README for example) maybe?