Applying CSS across multiple TextNodes

I'm looking for a way to apply a CSS class to an arbitrary text range in an HTML document. I'm using MooTools and the the rangy library, and something like this works if there's only a single TextNode to deal with:

createRange: function(start, end) {
    var node = this.textArea.childNodes[0]; // textArea is an HTML <span> element

    var range = rangy.createRange();
    range.setStart(node, start);
    range.setStart(node, end);

    return range;
}

This gives me a range I can then apply a CSS class to; However, if I have any HTML markup inside T开发者_开发百科extArea, I now have multiple TextNodes, and I need to set a range starting in one and ending in the other. I think I can do this if I can get an ordered list of all TextNodes inside textArea, but I'm not sure how (or if) I can get that list.

why not just style the ::select pseudo?

textarea::selection {
background: #abc;
color: #abc;
}

textarea::-moz-selection {
background: #abc;
color: #abc;
}

textarea::-webkit-selection {
background: #abc;
color: #abc;
}

Rangy has a CSS class applier module that I think will do what you want.