attribute selector for class starts with and ends with

Question

I have been reading up on attribute selectors, such as ~ ^ | etc, but I cant figure out the following: How do I target an element with a class starting with lets say "abc" and also ends with "xyz". The way I have it now is this:

div[class^="abc"][class$="xyz"]{}

But if my element looks like this, it wont work:

<div class="foo abcDExyz bar">

It only works if abcDExyz is the only class in the class attribute.

Basically, I want to target a class that starts with something... and ends with something. In between that, anything can go (such as 'DE' in my example) Is my only option to use * instead?

thanks in advance!

Answer 1

You can only do this if you can guarantee that the substrings "abc" and "xyz" will never appear in any other class names within that element's class attribute, and they will never appear separately:

div[class*=" abc"][class*="xyz "]

And even this falls flat when that class name is the first, last, or only one in the class attribute (unless you include the respective ^= and $= attribute selectors, but it's all still very fragile).

Otherwise, you won't be able to do this reliably with just a selector, or even a list of selectors.

You'd have a much easier time if whatever "abc" and "xyz" are supposed to represent was its own class name, instead...