How to select elements with similar names?

Question

The code is

<p class="blue-example">Blue</p>
<p class="red-example">Red</p>
<p class="Yellow-example">Yellow</p>

Is there a way to select all three classes with single line something like:

.&-example { height: 200px; }

I'm looking for a feature like when you go to a library and look for, let's say, all authors whose family name is Smith. You'd put in search box "* Smith" or "? Smith".

you could use an [attribute contains selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors), but the point of classes is that they are meant to style similar elements - so why not give all your elements the same class as well as the modifier class — Pete, Apr 05 '22 at 12:47
Pete you are right. This example is wrong use of classes. They should rather be IDs to really underline the question in this post. Also, the code that I have is a generated SVG from a graphic design software. Those exported SVG don't have classes. I just didn't want to include the full story here but just rather ask about trick to target similar elements. — Konstantin Nikkari, Apr 05 '22 at 13:25

score 0 · Answer 1 · answered Apr 05 '22 at 12:43

You could use $ to select className end with specific string.

p[class$='-example']{
color:blue;
height:200px;

}

<p class="blue-example">Blue</p>
<p class="red-example">Red</p>
<p class="Yellow-example">Yellow</p>

Use *= to macth any className contain this string.

The [attribute*=value] selector matches every element whose attribute value containing a specified value.

You could use *= to select className end with specific string.

p[class*='-example']{
color:blue;
height:200px;

}

<p class="blue-example">Blue</p>
<p class="red-example-no">Red</p>
<p class="Yellow-example-yo">Yellow</p>

How to select elements with similar names?

1 Answers1