How can I select only CSS classes based on two strings that have a string between them?

Question

How can I create a selector that matches any set of two specific strings with a dynamic string in between them?:

e.g.

[class*="animation-"**"-infinite"] {
    animation-iteration-count: infinite;
}

So it would be able to target these classes:

class="animation-hover-infinite"
class="animation-scale-infinite"
class="animation-opacity-infinite-somethingElse"
class="animation-etc-infinite withSomeOtherClass"

But not target this:

class="animation-something"
class="something-infinite"

Is this possible? Or are there other CSS selectors that can make this happen?

Unfortunately that is not something that CSS attribute selectors support. You can see the currently supported ones on the documentation: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors — gespinha
– gespinha, Commented Aug 16, 2017 at 13:06

Gerard · Accepted Answer · 2017-08-16 13:11:10Z

2

You can check for start and end, if that helps.

div[class^="animation-"][class$="-infinite"] {
  animation-iteration-count: infinite;
  background: red;
}

div {
  width: 100px;
  height: 100px;
  background: blue;
  margin-bottom: 1em;
}

<div class="animation-blabla-infinite"></div>
<div class="animation-blabla-infinites"></div>
<div class="zanimation-blabla-infinite"></div>

answered Aug 16, 2017 at 13:11

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jonathan002 Over a year ago

Thanks for this. Although this only allows it if the class is specifically has animation-blabla-infinite. Is it possible to make it work with class="animation-blabla-infinite another-class"

Ehsan Over a year ago

This do not work for class="animation-opacity-infinite-somethingElse"

Gerard Over a year ago

@ehsan and that wasn't the question. any set of two specific strings with a dynamic string in between them. I didn't even look at the examples. Now that I do, they don't match the initial request.

user5014677 Over a year ago

I would probably use *="animation-" and *="-infinite" because op said with something in between. I think that would be the closest thing you could achieve with only css. In your code it won't work if there's another classname at the end or start.

Collectives™ on Stack Overflow

How can I select only CSS classes based on two strings that have a string between them?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related