How do i select the first and last child element with a particular class name

Question

For example, i have the following code snippet. In this i would like to target the first and last child element which has the class 'active'

i.e something like

• .parent .child.active:first-child

• .parent .child.active:last-child

So i want the styles to only apply to the span with data 3 and 6

I cannot hardcode the nth-child selector because the active class can be dynamic and can occur anywhere.

Is there a possibility to do this only via css ? Any help appreciated

<span class="parent">
    <span class="child">
        <span class="legend">Start</span>
    </span>
    <span class="child">
        <span class="legend">1</span>
    </span>
    <span class="child">
        <span class="legend">2</span>
    </span>
    <span class="child active">
        <span class="legend">3</span>
    </span>
    <span class="child active">
        <span class="legend">4</span>
    </span>
    <span class="child active">
        <span class="legend">5</span>
    </span>
    <span class="child active">
        <span class="legend">6</span>
    </span>
    <span class="child">
        <span class="legend">7</span>
    </span>
    <span class="child">
        <span class="legend">8</span>
    </span>
    <span class="child">
        <span class="legend">9</span>
    </span>
    <span class="child">
        <span class="legend">10</span>
    </span>
</span>