Apply Css to multiple class

Question

In my HTML template I have some CSS generated classes like :

• .term-1-2
• .term-2-2
• .term-10-0-1

Ho can I create a CSS class to include all letters after "term" like :

• .term-*

How is it possible in css ?

Thank you

Answer 1

[class*="term-"] { /* your rules here */ }

This is called attribute selector.

It reads

"Apply the following rules to any element with a class attribute that has term- in it."

Please note that this would also match e.g. <div class="regular-term-a">. If that is a problem, go with @Roko C. Buljan's answer.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 2

Use this rather complicated selector:

[class^="term-"], [class*=" term-"] {

}

to make sure you're targeting both

• ^= Starts with "term-" i.e: class="term-1-2 foo bar baz"
• *= Contains (notice the leading space!) " term-" i.e: class="foo bar term-1-2 baz"

MDN: Attribute selectors