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

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.

Svelte Template

Here is my css selector.

Svelte css selector

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

DOM output

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>

Leave a Reply