Home › Forums › Other › Selecting a CSS Class divided into names › Reply To: Selecting a CSS Class divided into names
If you’re asking whether [class^='asset-']
is a valid selector, then the answer is yes. This doesn’t have anything to do with sass, however; it’s a css selector. It works in modern browsers, back to IE8.
However, note that selector will only work when you list the “asset-whatever” class first. If you put some other class first (or end up with another class first somehow, programatically, maybe), then it won’t match.
You could use [class*=asset-]
instead, though that would also match things like class=not-an-asset
.
To match only asset-
classes, wherever they appear in the list, you’d need to do:
[class^=asset-],[class*=' asset-']{
/* your styles here.
note the leading space in the *= selector. */
}
I haven’t looked at cross-browser compatibility for the *=leading-space method. Give it a try.
. . . . . EDIT . . . . .
p.s. – regarding the $=
rules, that would be very fragile, for all the reasons above – I’d recommend against it. If the styles truly are independent (i.e., all -whatever
classes get the same styling, not just asset-whatever
classes), you might look at the |=
(in-dash-separated-list) selector.