Home Svelte template syntax: How can I target nested DOM elements inside an html expression with css?

Questions

Svelte template syntax: How can I target nested DOM elements inside an html expression with css?

April 19, 2023

I’m using svelte to create a blog about cooking. I am getting data from a CMS that is returning HTML. I know that part of that html will be an unordered list. I’d like to style that list but my attempts are not working.

Here is my div.

Here is my css selector.

And finally here is the DOM just to be sure that it’s outputting what I expect.

Is there a different way to approach this? Thank you.

>Solution :

Does this work for you? :global() https://svelte.dev/docs#component-format-style

<script>
    const cmsData = "<ul><li>hey</li></ul>"
</script>

<div class="content">
    {@html cmsData}
</div>

<style>
    .content :global(ul) {
        color: red;
    } 
</style>