Select all descendant HTML elements with a certain class that don't have an element with an other specific class in between

Assume you have the following HTML:

<div id="root-component" class="script-component">a0
            <div></div>
            <div class="component">a2</div>
            <div class="script-component">b
                <div class="component">b1
                    <div class="script-component">c
                    </div>
                    <div class="component">b2
                    </div>
                </div>
            </div>
            <div class="component">a3</div>
            <div class="component">a4</div>
            <div>            
                <div class="component">a5</div>
            </div>
            <div class="component"> a6            
                <div class="component">a7</div>
            </div>
            <div class="component">a8
                <div class="script-component"></div>
            </div>
</div>

From the root-component I would like to select all child elements with a component class until and not including the elements with the script-component class. This means at the end only the elements with an a text should be selected.

Edit: Or in Trung's words: The goal is to skip searching for components down the tree once script-component class is encountered.

Edit2: Or in even other words: I would like to select all .component children until a .script-component is encountered.

It can be done using jQuery and CSS.

You can use this jsFiddle http://ift.tt/1gf6Nlb to try it out.

via Chebli Mohamed